Automatic Image Carousel / Scroller Plugin For jQuery - Rotate.js

Automatic Image Carousel / Scroller Plugin For jQuery - Rotate.js
File Size: 6.45 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Rotate.js is a super simple jQuery plugin which scroll through an image list like Carousel or traditional marquee element.

Main features:

  • Infinite looping.
  • Pause scrolling on mouse hover.

How to use it:

1. Insert an unordered list of images into the carousel / rotator.

<div id="slideImg">
  <div class="slideMain">
    <ul class="slide1">
      <li><img src="img/1.jpg"/></li>
      <li><img src="img/2.jpg"/></li>
      <li><img src="img/3.jpg"/></li>
      ...
    </ul>
  </div>
</div>

2. Place jQuery library and the jQuery rotate.js plugin at the bottom of the webpage.

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.rotate.js"></script>

3. Initialize the carousel / rotator and done.

$("#slideImg").rotate();

4. Available plugin options.

$("#slideImg").rotate({

  // animation speed
  speed:10,

  // width
  width:"900px",

  // selector
  slide1:".slide1"
  
});

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