skdslider
SKDSlider - Full Width Jquery Slider - Jquery Responsive Full Width Slider - Full Screen Slider- Simple Jquery Slider
Demo
http://dandywebsolution.com/skdslider/
How to use?
markup
<link href="skdslider.css" rel="stylesheet"> <script src="skdslider.min.js"></script> <div id="demo1"> <div class="slide"> <img height="285" src="slides/1.jpg" /> </div> <div class="slide"> <img height="285" src="slides/2.jpg" /> </div> <div class="slide"> <img height="285" src="slides/3.jpeg" /> </div> </div> Javascript
$('#demo1').skdslider({ slideSelector: '.slide', delay:5000, animationSpeed: 2000, showNextPrev:true, showPlayButton:true, autoSlide:true, animationType:'fading' }); Available options are:
| Option | Description |
| slideSelector | Define your slide css selector. Default selector: .slide |
| activeClass | Define what class would be set as active class to the active slide. Defaul class name: active |
| delay | Delay duration between two slides in micro seconds. Example: 5000 |
| animationSpeed | Fading Speed in micro seconds. Example: 2000 |
| animationType | fading/sliding - Default value is fading. |
| showNav | true/false - Default value is true. It will show/hide navigation icon |
| numericNav | true/false - Default value is false. If true, navigation will be numeric |
| autoSlide | true/false - Default value is true. Automatically start slideshow |
| showNextPrev | true/false - Default value is false. Either it will show next/prev button or not |
| showPlayButton | true/false - Default value is false. Either it will show play/pause button or not |
| pauseOnHover | true/false - Default value is false. Pause sliding on mouse hover |
| stopSlidingAfter | Default value is false. Other allowed values are 'all', 1,2,3.. If this properties is set, sliding will automatically stop at the specified slide |
| onMarkup | It is a hooking function and will be invoked just before UI is generated. So it is possible to modify ui like navigiation layout without modify core file. (example: coming soon...) |
