Minimal Banner Slider Plugin With jQuery - Banner.js

Banner.js is a very simple jQuery plugin designed to create an automatic image carouse/slider with several transition effects for your site banner.

How to use it:

1. Put jQuery library and the jQuery banner.js plugin's files into the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery-banner.min.js"></script>
<link rel="stylesheet" href="css/jquery-banner.css">

2. Create a list of images and then insert them into a wrapper element as this:

<div id="banner" class="banner">
  <ul>
    <li><a href=""><img src="1.png"></a></li>
    <li><a href=""><img src="2.png"></a></li>
    <li><a href=""><img src="3.png"></a></li>
  </ul>
</div>

3. Call the function on the top element to generate a basic image carousel:

$("#banner").banner();

4. To customize the plugin, just apply the following options to the banner() method on init:

$("#banner").banner({

  // '[left]' / '[right]' / '[up]' / '[down]' / '[fade]' / '[cut]'
  effect : 'down' ,

  // transition interval in ms
  intervalue : 3000 ,

  // animation speed
  speed : 600 ,

  // autoplay
  auto : true ,

  // infinite loop
  cycle : true
  
});

---

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