JS Carousel

HTML

<div class="js-carousel-container" data-row-size="3" data-num-slide="1" infinite="false">
      <ul>
          <li><a href="#"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
      </ul>
  </div>

<div style="clear:both;"></div>

CSS

/* Carousel */
.js-carousel-container ul {
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 9999px;
}

.js-carousel-container ul li {
  background-color: #f7f7f7;
  float: left;
  padding: 0;
}

.js-carousel-inner {
  float: left;
  overflow: hidden;
  width: 200px; /* default width if js disabled */
}

.arrows {
  float: left;
  position: relative;
}

JavaScript

var b = {};
b.carousel = {
    dom_prefix: 'js-carousel-',
    init: function() {
        $(function() {
            // Target container
            var $container = $('.' + b.carousel.dom_prefix + 'container');

            // Wraps our hidden container, order matters
            $container.find('ul').wrap('<div class="' + b.carousel.dom_prefix + 'inner" />');

            // Container elements
            var $containerInner = $('.' + b.carousel.dom_prefix + 'inner');
            var $ul = $container.find('ul');
            var $li = $container.find('li');

            // Container sizes
            var numElements = $li.size();
            var thumbWidth = $li.innerWidth();
            var thumbHeight = $li.innerHeight();

            // HTML data attributes
            var rowSize = $container.data('row-size');
            var numSlide = $container.data('num-slide');
            var marginRight = $container.data('margin-right');
            var infinite = $container.attr('infinite');

            // HTML data attributes (defaults if not user specified)
            if (isNaN(rowSize) || !rowSize || rowSize === 'undefined') {
                rowSize = 2;
            }

            if (isNaN(numSlide) || !numSlide || numSlide === 'undefined') {
                numSlide = 2;
            }

            if (isNaN(marginRight) || !marginRight || marginRight === 'undefined') {
                marginRight = 20;
            }

            // Size up the container (subtracting one from the margin)
            var panelWidth = ((rowSize * thumbWidth) + (marginRight * (rowSize - 1)));

            // Set initial ul width and height
            $containerInner.width(panelWidth).height(thumbHeight);

            // Set initial li width, height, and margin
            $li.css('width', thumbWidth).css('height', thumbHeight).css('margin-right', marginRight);

            // Append arrows
            var $leftArrow = $('<div class="arrows"><span class="nav_left"><a class="' +...