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">
  <ul>
    <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>
    ...
  </ul>
</div>

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

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

3. Initialize the banner slider with some options.

$('.mySlider').simpleBanner({
  dots:'dots-pagi'
});

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 li.active { background: #ff7f02; }

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

$('.mySlider').simpleBanner({
  dots:'dots-pagi',
  eventType:'mouseenter'
});

7. More configurations with default values.

$('.mySlider').simpleBanner({
  dots:'dots-pagi',
  speed:500,
  arrows:false,
  autoPlay:true,
  autoPlayDuration:5000,
});

Change log:

2017-11-01

• update return & slide index

2016-12-02

• 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.