Concise Banner Rotator / Carousel Plugin For jQuery - simpleBanner.js

simpleBanner.js is a lightweight, fast jQuery slider/carousel plugin which converts an html list of images into a banner rotator featuring auto rotation, infinite looping and navigation controls.

How to use it:

1. Import the required style sheet jquery.simplebanner.css that provides the main CSS styles for the banner rotator.

<link rel="stylesheet" href="jquery.simplebanner.css">

2. Insert a list of images into the banner rotator following the markup structure like this:

<div class="simpleBanner">
  <div class="bannerListWpr">
    <ul class="bannerList">
      <li><img src="samples/image1.jpg" /></li>
      <li><img src="samples/image2.jpg" /></li>
      <li><img src="samples/image3.jpg" /></li>
      <li><img src="samples/image4.jpg" /></li>
      <li><img src="samples/image5.jpg" /></li>
      <li><img src="samples/image6.jpg" /></li>
    </ul>
  </div>
  <div class="bannerControlsWpr bannerControlsPrev"><div class="bannerControls"></div></div>
  <div class="bannerIndicators"><ul></ul></div>
  <div class="bannerControlsWpr bannerControlsNext"><div class="bannerControls"></div></div>
</div>

3. The plugin requires the latest version of jQuery library to work properly.

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

4. Active the banner rotator and we're done.

$('.simpleBanner').simplebanner();

5. Default customization options.

$('.simpleBanner').simplebanner({

  // shows navigation arrows
  arrows:true,

  // shows pagination bullets
  indicators:true,

  // pause autoplay on hover
  pauseOnHover:true,

  // autoplay
  autoRotate:true,

  // max rotations
  maxRotations: null,

  // autoplay interval
  rotateTimeout:5000,

  // animation speed
  animTime:300,

});

6. The plugin also allows you to execute a custom function on each slide changes.

$('.simpleBanner').simplebanner({

  onChange: null

});

---

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