title: Carousel Failure Unexplained
body: <p>So I have this carousel but does not seem to be working and I'm not sure why. I have this function inside <code>$(document).ready()</code> but when I click <code>next</code>/<code>prev</code>, it does not work. So I think maybe I'm doing something wrong as it does not seem to be picking it up at all.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="jb-video-carousel"&gt;
    &lt;span class="business-left"&gt;&lt;/span&gt;
    &lt;ul class="jb-videos-container"&gt;
      &lt;li class="jb-video-container"&gt;test&lt;/li&gt;
      &lt;li class="jb-video-container"&gt;test&lt;/li&gt;
      &lt;li class="jb-video-container"&gt;test&lt;/li&gt;
      &lt;li class="jb-video-container"&gt;test&lt;/li&gt;
    &lt;/ul&gt;
    &lt;span class="business-right"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>(function () {
      var defaults = {
          container: '.jb-videos-container',
          wrap: '.jb-video-carousel',
          item: '.jb-video-container',
          btnPrev: '.business-left',
          btnNext: '.business-right'
      };
  
      var itemsPerPage = 0,
          totalPages = 0,
          page = 1,
          $items = $(defaults.item, el),
          $wrapper = $(defaults.wrap, el),
          $container = $(defaults.container, el),
          $next = $(defaults.btnNext, el),
          $prev = $(defaults.btnPrev, el),
          itemWidth = $items.eq(0).outerWidth(true),
          margin = itemWidth - $items.eq(0).width(),
  
      moveToPage = function (n) {
          var scalar = n &gt; 1 ? n - 1 : 0,
              rem = $items.length - (scalar * itemsPerPage),
              left = 0;
  
          if (rem &lt; itemsPerPage) {
              left = (($items.length) * itemWidth) - $wrapper.width();
          } else {
              left = scalar * (itemsPerPage * itemWidth);
          }
  
          $container.css('left', -left);
          page = n;
      },
  
      layout = function () {
          itemsPerPage = Math.floor(($wrapper.outerWidth() + margin) / itemWidth);
          totalPages = Math.ceil($items.length / itemsPerPage);
  
          if (totalPages === 1) {
              $prev.hide();
              $next.hide();
          }
          else {
              $prev.show();
              $next.show();
          }
      },
  
      onResize = function () {
          layout();
          moveToPage(page);
      },
  
      pagePrev = function () {
          var destination = page - 1;
          if (destination &lt;= 0) {
              destination = 1;
          }
          moveToPage(destination);
      },
  
      pageNext = function () {
          var destination = page + 1;
          if (destination &gt; totalPages) {
              destination = totalPages;
          }
          moveToPage(destination);
      };
  
      $container.css({
          'position': 'absolute',
          'width': (itemWidth * $items.length)
      });
  
      $(window).on('resize', function (evt) {
          onResize(evt);
      });
  
      $next.on('click', function (evt) {
          pageNext();
          return false;
      });
  
      $prev.on('click', function (evt) {
          pagePrev();
          return false;
      });
  
      domready(function () {
          setTimeout(onResize);
      });
  });
  </code></pre>