Automatic Cross-fading Carousel Plugin For jQuery - autoSlider

autoSlider is a lightweight, responsive jQuery slideshow plugin that converts a list of images/text into an automatic slider/carousel with a crossfade transition effect.

How to use it:

1. Create the html for a banner rotator using the jQuery autoSlider plugin.

<div id="banner" class="banner">
  <ul>
    <li> <img src="1.jpg" alt="">
      <p>Slide 1</p>
    </li>
    <li> <img src="2.jpg" alt="">
      <p>Slide 2</p>
    </li>
    <li> <img src="3.jpg" alt="">
      <p>Slide 3</p>
    </li>
  </ul>
</div>

2. Load jQuery library and the jQuery autoSlider plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
<script src="js/jQuery.autoSlider.js"></script> 

3. Call the plugin on the parent container.

$(function(){
  $('.banner').autoSlider({
    // options
  });
});

4. Add the required styles to the banner rotator.

.banner {
  position: relative;
  margin: 0 auto;
  max-width:720px;
}

.banner ul,
ol {
  padding: 0;
  margin: 0
}

.banner li {
  width: 100%;
  list-style: none
}

.banner li p {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 50%;
  text-align: center;
  font-size: 28px;
  height: 38px;
  color: #fff;
  margin-top: -19px
}

.banner li a {
  text-decoration: none;
  color: #fff
}

#banner ol {
  width: 42px;
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 1000;
  margin-left: -21px;
  overflow: hidden
}

#banner ol li {
  float: left;
  background-color: #fff;
  color: #000;
  margin: 2px;
  width: 10px;
  height: 10px;
  display: block;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 14px;
  text-indent: -999em;
  list-style: none
}

#banner ol li.active {
  background-color: orange;
  color: #fff
}

5. The default options.

$(function(){
  $('.banner').autoSlider({

    // animation speed
    speed: 500,

    // transition delay
    delay: 3000, 

    // display navigation bullets
    dots: false, 

    // mouse hover to pause the auto slider
    stay: false, 

    // enable fluid layout
    fluid: false 
    
  });
});

---

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