Basic Banner Slider Plugin For jQuery - simpleBanner.js

File Size: 5.55 KB
Views Total: 7527
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Banner Slider Plugin For jQuery - simpleBanner.js

A minimal, cross-browser and customizable jQuery plugin used to generate a basic, auto-rotating banner slider from a list of images for your website.

How to use it:

1. Create a list of image you want to switch between.

<div class="mySldier">
    <li><img src="1.jpg" alt=""></li>
    <li><img src="2.jpg" alt=""></li>
    <li><img src="3.jpg" alt=""></li>
    <li><img src="4.jpg" alt=""></li>

2. Import jQuery library and the jQuery simpleBanner.js script into the webpage.

<script src="//"></script>
<script src="simpleBanner.js"></script>

3. Initialize the banner slider with some options.


4. Let's start to style the banner slider.

.mySlider {
  overflow: hidden;
  width: 100%;
  position: relative;

.mySlider ul {
  overflow: hidden;
  margin: 0;
  zoom: 1;

.mySlider ul li { float: left; }

.mySlider ul li img { width: 100%; }

5. Style the navigation control.

.dots-pagi {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 300px;
  margin: 0 0 0 -150px;
  padding: 0;
  text-align: center;

.dots-pagi li {
  display: inline-block;
 *display: inline;
 *zoom: 1;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;

.dots-pagi li:hover, .dots-pagi { background: #ff7f02; }

6. Config the banner slider to switch between images when the users hover over the pagination dots.


7. More configurations with default values.


Change log:


  • update return & slide index


  • added 'fade' and 'slide' animations

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