Automatic & Infinite Content Rotator with jQuery and CSS

Automatic & Infinite Content Rotator with jQuery and CSS
File Size: 1.68 KB
Views Total: 2153
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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>

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="//"></script> 

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

<script src="//"></script> 

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

  var el = "li";
  var elContainer = "#spin";
  var elWidth = 140;
  elWidth = elWidth + 4;
  var elCount = $(elContainer).children().length;
  $(elContainer).width((elCount * elWidth) + "px");
      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.