Automatic & Infinite Content Rotator with jQuery and CSS

Makes use of CSS and a little jQuery magic to create a simple, automatic, infinite-looping content carousel/rotator with support for easing functions.

How to use it:

1. Create a content rotator from an Html unordered list as displayed below.

<ul id="spin">
  <li><img src="1.jpg"></li>
  <li><img src="2.jpg"></li>
  <li><img src="3.jpg"></li>
  <li><img src="4.jpg"></li>
  <li><img src="5.jpg"></li>
  ...
</ul>

2. The primary CSS styles for the content rotator.

ul#spin {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul#spin li {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
}

ul#spin img {
  margin: 0;
  padding: 0;
  display: block;
  border-radius: 3px;
  margin-right: 10px;
}

3. Load the necessary jQuery library at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 

4. Load the jQuery easing plugin for more easing functions.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 

5. The core jQuery script to enable the content rotator.

$(document).ready(function(){
  var el = "li";
  var elContainer = "#spin";
  var elWidth = 140;
  elWidth = elWidth + 4;
  var elCount = $(elContainer).children().length;
  
  $(elContainer).width((elCount * elWidth) + "px");
  
  
  setInterval(function(){
    $("#spin").animate({
      marginLeft: '-=140px'
    }, 900, 'easeInOutExpo', function() {
      $(elContainer).css({marginLeft: '0'});
      var _first = $(elContainer + ' ' + el +':first').appendTo('#spin');
    }); 

  }, 2900)
  
});

---

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