jQuery-stepCycle

StepCycle is a simple image rotator.

Version

1.4

Options:

• transitionTime - how long transitions between slides will take (in seconds). Default is 1.5.
• displayTime - how long slides show before switching to the next slide (in seconds). Default is 5.
• transition - which transition to use. Options are fade, zoom, slidePush, slideOver. Default is zoom.
• easing - string with name of easing function to use. Default is linear.
• navDotClass - class that is used on the navigation dots. Default is navDot.
• navContainerSelector - selector for container that gets created to house the navigation dots. Default is .navDots
• navItemTemplate - html for nav items that will be generated for each slide. Default is  
• prevButton - selector for previous button. Default is .cycle_prev.
• nextButton - selector for next button. Default is .cycle_next.
• childSelector - selector that determines which children are considered slides. Default is .banner_slide
• ie8CheckSelector - selector that is used to determine if the current browser is IE8. Default is .ltie9
• showNav - determines whether the nav dots will be shown
• transitionBegin - callback that runs when a slide transition begins. Parameters are $oldSlide and $newSlide
• transitionComplete - callback that runs when a slide transition is complete. Parameters are $oldSlide, and $newSlide
• randomize - randomize the display order of the slides. Default is false.

Example Usage:

<div class="banner-slider">      <ul class="banner-slider_nav"></ul>      <div class="banner">         <img class="banner_image" src="/images/banner-placeholder.jpg" />         <div class="banner_overlay">             <div class="banner_overlay_container">                 <h1 class="banner_overlay_header">Title</h1>                 <h2 class="banner_overlay_subhead">Sub-Title</h2>                 <a class="banner_overlay_cta button button--color4 button--inline " href="#"  data-buttontext="Get started now">Get started now<span class="icon icon--arrow icon--flushright"></span></a>             </div>         </div>     </div>     <div class="banner">         <img class="banner_image" src="/images/banner-placeholder2.jpg" />         <div class="banner_overlay">             <div class="banner_overlay_container">                 <h1 class="banner_overlay_header">Title</h1>                 <h2 class="banner_overlay_subhead">Sub-Title</h2>                 <a class="banner_overlay_cta button button--color4 button--inline " href="#"  data-buttontext="Get started now">Get started now<span class="icon icon--arrow icon--flushright"></span></a>             </div>         </div>     </div> </div>  <script>     $(document).ready(function(e){         $('.banner-slider').stepCycle({           transition:'fade',           childSelector: '.banner',           transitionTime: .75,           randomize: true,           navContainer: '.banner-slider_nav',           navDot:'banner-slider_nav_item',           navItemTemplate: '<li class="banner-slider_nav_item banner-slider_nav_item--is-selected"><a href="#">&bull;</a></li>',           navSelectedClass: 'banner-slider_nav_item--is-selected'         });     }) </script> 

License

MIT