SliderJS
jQuery Slider with CSS Transitions
##Usage
1 - Paste right before your page's closing </body> tag
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="slider.min.js"></script>2 - From within a script tag or a JS file
Slider.init({ target: $('.slider'), // domNode to attach to time: 6000 // Range for the next transition in milliseconds. Default 5000. });##HTML
The HTML structure damn slide is as listed below:
<div class="slider"> <div class="slider-container"> <div class="slider-wrapper"> <div class="slide"> <!-- html here --> </div> <div class="slide"> <!-- html here --> </div> <div class="slide"> <!-- html here --> </div> <div class="slide"> <!-- html here --> </div> </div> </div> </div>##CSS
The minimum CSS slide should be as below:
.slider-container { height: 425px; /*The height of the slide*/ overflow: hidden; position: relative; width: 990px; /*The width of the slide*/ } .slider-container .slider-wrapper { left: 0; overflow: hidden; position: absolute; top: 0; width: 5000em; /*Fix for prevent display errors*/ // The range of the transition -webkit-transition: all 800ms ease; -moz-transition: all 800ms ease; -o-transition: all 800ms ease; transition: all 800ms ease; } .slider-container .slide { float: left; height: 425px; /*The height of the slide for prevent display errors*/ overflow: hidden; position: relative; width: 990px; /*The width of the slide for prevent display errors*/ }##Compatibility
The transitions occur via CSS in browsers that have support for CSS Transitions, otherwise they are carried through the jQuery animate.
##Browser Support
- IE7+ (If used jQuery 1.10.1 or greater)
- Opera
- Google Chrome
- Safari
- Firefox
