Skip to content

samirkumardas/skdslider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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