Flexible & Responsive jQuery Carousel Plugin

A flexible and responsive jQuery carousel plugin which allows you to cycle through a set of slide items as many as possible based on the container's width.

How to use it:

1. Create the Html for a product carousel with next/pre controls.

<div class="carousel-wrapper" id="products">

  <ul class="carousel-inner clearfix">
    <li class="item">
      <p class="item-info"> Slide 1 </p>
    </li>
    <li class="item">
      <p class="item-info"> Slide 2 </p>
    </li>
    <li class="item">
      <p class="item-info"> Slide 3 </p>
    </li>
    <li class="item">
      <p class="item-info"> Slide 4 </p>
    </li>

    ...

  </ul>
  <a href="#" class="carousel-left"></a> <a href="#" class="carousel-right"></a> 
</div>

2. The required CSS styles for the product carousel.

.carousel-wrapper {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  height: 100%;
  position: relative;
  padding: 0 0 0 50px;
  left: 0;
  margin: 0;
  transition: all 1s;
}

.carousel-inner .item {
  height: 100%;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0 50px 0 0;
}

.carousel-inner .item:before {
  counter-increment: item;
  content: counter(item);
}

.carousel-left,
.carousel-right {
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
}

.carousel-left:before,
.carousel-right:before {
  content: "";
  background: #666;
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.5;
}

.carousel-left:hover:before,
.carousel-right:hover:before { opacity: 0.8; }

.carousel-left { left: 0; }

.carousel-right { right: 0; }

3. Add your own styles to the product carousel.

.carousel-wrapper {
  background: #055252;
  padding: 30px 0;
}

.carousel-inner .item {
  background: #eee;
  padding: 1em 2em;
  font-size: 1.2em;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px 0 #333;
}

.carousel-inner .item:hover {
  background: #fff;
  box-shadow: 1px 1px 3px 2px #333;
}

.carousel-left:before,
.carousel-right:before {
  background: url(arrows.png) no-repeat;
  width: 50px;
}

.carousel-left:before {
  left: 0;
  background-position: -20% center;
}

.carousel-right:before {
  right: 0;
  background-position: -40px center;
}

4. Include the necessary jQuery library at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

5. The core Javascript for the carousel.

var Carousel = function (elId, mode) {
  var wrapper = document.getElementById(elId);
  var innerEl = wrapper.getElementsByClassName('carousel-inner')[0];
  var leftButton = wrapper.getElementsByClassName('carousel-left')[0];
  var rightButton = wrapper.getElementsByClassName('carousel-right')[0];
  var items = wrapper.getElementsByClassName('item');

  this.carouselSize = items.length;
  this.itemWidth = null;
  this.itemOuterWidth = null;
  this.currentStep = 0;
  this.itemsAtOnce = 3;
  this.minItemWidth = 200;
  this.position = innerEl.style;
  this.mode = mode;

  this.init = function (mode) {
    this.itemsAtOnce = mode;
    this.calcWidth(wrapper, innerEl, items);
    cb_addEventListener(leftButton, 'click', this.goLeft.bind(this));
    cb_addEventListener(rightButton, 'click', this.goRight.bind(this));
    cb_addEventListener(window, 'resize', this.calcWidth.bind(this, wrapper, innerEl, items));
  };
  return this.init(mode);
};

Carousel.prototype = {
  goLeft: function(e) {
    e.preventDefault();
    if (this.currentStep) {
      --this.currentStep;
    } else {
      this.currentStep = this.carouselSize - this.itemsAtOnce;
    }
    this.makeStep(this.currentStep);
    return false;
  },
  goRight: function(e) {
    e.preventDefault();
    if (this.currentStep < (this.carouselSize - this.itemsAtOnce)) {
      ++this.currentStep;
    } else {
      this.currentStep = 0;
    }
    this.makeStep(this.currentStep);
    return false;
  },
  makeStep: function(step) {
    this.position.left = -(this.itemOuterWidth * step) + 'px';
  },
  calcWidth: function(wrapper, innerEl, items) {
    this.beResponsive();

    var itemStyle = window.getComputedStyle(items[0]);  
    var innerElStyle = innerEl.style;
    var carouselLength = this.carouselSize;
    var wrapWidth = wrapper.offsetWidth - parseInt(itemStyle.marginRight, 10) * (this.itemsAtOnce + 1);

    innerElStyle.display = 'none';
    this.itemWidth = wrapWidth / this.itemsAtOnce;
    this.itemOuterWidth = this.itemWidth + parseInt(itemStyle.marginRight, 10);
    for (i = 0; i < carouselLength; i++) {
        items[i].style.width = this.itemWidth + 'px';
    }
    innerElStyle.width = this.itemOuterWidth * this.carouselSize + 'px';
    innerElStyle.display = 'block';
  },

  beResponsive: function() {
    var winWidth = window.innerWidth;
    if (winWidth >= 650 && winWidth < 950 && this.itemsAtOnce >= 2) {
      this.itemsAtOnce = 2;
    }
    else if (winWidth < 650) {
      this.itemsAtOnce = 1;
    }
    else {
      this.itemsAtOnce = this.mode;
    }
  }
}
/**
* Cross-browser Event Listener
**/
function cb_addEventListener(obj, evt, fnc) {
  if (obj && obj.addEventListener) {
      obj.addEventListener(evt, fnc, false);
      return true;
  } else if (obj && obj.attachEvent) {
      return obj.attachEvent('on' + evt, fnc);
  }
  return false;
}

6. Initialize the carousel and set how many items will be shown on one slide.

if (document.getElementById('products')) {
  var productsCarousel = new Carousel('products', 5);
}

---

This awesome jQuery plugin is developed by anilkabobo. For more Advanced Usages, please check the demo page or visit the official website.