Auto Crossfading Banner Slider with jQuery - stepcycle

stepcycle is a jQuery banner slider plugin used to cycle through html content (images, text, etc) with a crossfade animation based on jQuery animate() and CSS opacity property.

How to use it:

1. Build the markup structure to create a banner slider for your website.

<div class="banner">
  <div class="banner-slider">
    <ul class="banner-slider_nav">
    </ul>
    <div class="banner_slide">
     <img class="banner_image" src="slider-1.jpg">
      <div class="banner_overlay">
        <div class="banner_overlay_container">
          <h1 class="banner_overlay_header">Slide 1</h1>
          <h2 class="banner_overlay_subhead">Sub text</h2>
          <a class="banner_button" href="#"  data-buttontext="Button 1">
            Get started now
            <span class="icon icon--arrow icon--flushright"></span>
          </a> 
        </div>
      </div>
    </div>
    <div class="banner_slide">
     <img class="banner_image" src="slider-1.jpg">
      <div class="banner_overlay">
        <div class="banner_overlay_container">
          <h1 class="banner_overlay_header">Slide 2</h1>
          <h2 class="banner_overlay_subhead">Sub text</h2>
          <a class="banner_button" href="#"  data-buttontext="Button 2">
            Get started now
            <span class="icon icon--arrow icon--flushright"></span>
          </a> 
        </div>
      </div>
    </div>
    <div class="banner_slide">
     <img class="banner_image" src="slider-3.jpg">
      <div class="banner_overlay">
        <div class="banner_overlay_container">
          <h1 class="banner_overlay_header">Slide 3</h1>
          <h2 class="banner_overlay_subhead">Sub text</h2>
          <a class="banner_button" href="#"  data-buttontext="Button 3">
            Get started now
            <span class="icon icon--arrow icon--flushright"></span>
          </a> 
        </div>
      </div>
    </div>
    <div class="cycle_arrow-wrapper">
      <a href="#" class="cycle_prev">&#x27b2;</a> 
      <a href="#" class="cycle_next">&#x27b2;</a> 
    </div>
  </div>
</div>

2. Load jQuery library and the jQuery stepcycle plugin at the end of the document.

<script src="jquery.min.js"></script> 
<script src="js/jquery.stepcycle.js"></script> 

3. Initialize the banner slider.

$(document).ready(function(e){
  $('.banner-slider').stepCycle({
   // OPTIONS
  });
})

4. The required CSS styles.

.banner {
  width: 100%;
  height: 100%;
}

.banner_image {
  position: absolute;
  display: block;
  left: -100%;
  right: -100%;
  max-width: 800px;
  margin: 0 auto;
  top: 0;
  bottom: 0;
}

.banner_overlay {
  position: absolute;
  z-index: 900;
  width: 800px;
  height: 100%;
  left: 50%;
  margin-left: -400px;
}

.banner_overlay_container {
  position: absolute;
  top: 0;
  width: 70%;
  padding-left: 50px;
}

.banner_overlay_header {
  color: #000;
  padding-left: 0;
  bottom: 5%;
}

.banner_overlay_subhead {
  margin-top: 1em;
  color: #555;
  margin-bottom: 1em;
}

.banner-slider {
  position: absolute;
  height: 389px;
  overflow: hidden;
  width: 100%;
}

.banner-slider_nav {
  position: absolute;
  z-index: 9999;
  width: 800px;
  bottom: 0;
  text-align: center;
  left: 50%;
  margin-left: -400px;
  padding-left: 0;
  margin-bottom: 0;
}

.banner-slider_nav_item { display: inline; }

.banner-slider_nav_item > a {
  display: inline-block;
  font-size: 3em;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  padding: 8px 3px;
  line-height: 12px;
}

.banner-slider_nav_item > a:hover { color: rgba(0, 0, 0, 0.75); }

.banner-slider_nav_item--is-selected > a { color: #000; }

.banner_slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.banner_button {
  padding: 20px;
  text-decoration: none;
  background-color: #4d4dff;
  color: #fff;
  display: inline-block;
}

.cycle_arrow-wrapper {
  position: absolute;
  height: 50px;
  top: 50%;
  margin-top: -25px;
  width: 800px;
  left: 50%;
  margin-left: -400px;
  z-index: 1001;
}

.cycle_next {
  position: absolute;
  right: 5px;
  color: #000;
  text-decoration: none;
  font-size: 30px;
}

.cycle_prev {
  position: absolute;
  left: 5px;
  color: #000;
  text-decoration: none;
  font-size: 30px;
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

5. Full plugin options.

$('.banner-slider').stepCycle({
  autoAdvance: true,
  transitionTime: 1.5,
  displayTime: 5,
  transition: 'zoom',
  easing: 'linear',
  navDot: 'navDot',
  navContainer: '.navDots',
  navSelectedClass: 'selected',
  navItemTemplate: '<a class="navDot" href="#">&nbsp;</a>',
  prevButton: '.cycle_prev',
  nextButton: '.cycle_next',
  childSelector: false,
  ie8CheckSelector: '.ltie9',
  showNav: true,
  transitionBegin: function(){},
  transitionComplete: function(){}
});

Change logs:

2016-08-31

• Add option to turn off auto advance

2016-08-20

• Disable slider for 1 slide

2016-06-08

• Add callback support for transitionBegin and transitionComplete

2015-06-23

• Hide slides that aren't currently showing

2015-06-09

• IE8 Fix

---

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