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...)