Easy Banner Rotator With jQuery - QuickBanner.js

A simple, fast, easy-to-implement banner rotator plugin for rotating through images.

Can be used to show multiple advertisements in a single location on your web page.

How to use it:

1. Load the needed jQuery library and Font Awesome iconic font in the document.

<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>

2. Create an empty container to hold the banner rotator.

<div id="bannerRotator"></div>

3. Apply your own CSS styles to the banner rotator.

#bannerRotator {
  display:none; 
  width:728px; 
  height:90px; 
  position:relative;
}

4. Define your own banner images & click callbacks in a JS array as follows.

var myBanners = [ 
    {
      imageUrl: '1.png', 
      onClick: 'Banner_OnClick(1)'
    },
    {
      imageUrl: '2.png', 
      onClick: 'Banner_OnClick(2)'
    },
    {
      imageUrl: '3.png', 
      onClick: 'Banner_OnClick(1)'
    }
],
var Banner_OnClick = function(val) {
    alert("Banner_OnClick: "+val);
}

5. Create a new instance of the banner rotator.

var instance = new QuickBanner({
    id: 'bannerRotator', 
    banners: myBanners,
});

6. Render the banner rotator on the page.

createBanner();

7. Customize the pagination indicator.

var instance = new QuickBanner({
    id: 'bannerRotator', 
    banners: myBanners,
    indicator : {
      style: 'fa-minus', // indicator icon
      backgroundColor: 'white',
      color: '#002844'
    },
});

8. Customize the close icon.

var instance = new QuickBanner({
    id: 'bannerRotator', 
    banners: myBanners,
    close : {
      style: 'fa-times'
    },
});

9. Determine the refresh rate. Default: 5.

var instance = new QuickBanner({
    id: 'bannerRotator', 
    banners: myBanners,
    refreshRate: 3000 // 3 sec
});

---

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