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

File Size: 844 KB
Views Total: 1438
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
  <div class="bannerControlsWpr bannerControlsPrev"><div class="bannerControls"></div></div>
  <div class="bannerIndicators"><ul></ul></div>
  <div class="bannerControlsWpr bannerControlsNext"><div class="bannerControls"></div></div>

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

<script src="//"></script>
<script src="jquery.simplebanner.js"></script>

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


5. Default customization options.


  // shows navigation arrows

  // shows pagination bullets

  // pause autoplay on hover

  // autoplay

  // max rotations
  maxRotations: null,

  // autoplay interval

  // animation speed


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


  onChange: null


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