Responsive Full Width Slider Plugin For jQuery - skdslider

SKDSlider is a jQuery based lightweight, responsive, touch-enabled image slider / carousel / slideshow. It can be used in full width mode. Works on almost all browser. It slides almost anything. Swipe/touch events will work for mobile devices.

How to use it:

1. Add references to jQuery library and the jQuery SKDSlider plugin's files.

<script src="//code.jquery.com/jquery.js"></script>
<script src="src/skdslider.min.js"></script>
<link href="src/skdslider.css" rel="stylesheet">

2. Add a list of web content to the slider like this:

<ul id="demo" class="slides">
  <li> <img src="slides/1.jpg" /> 
    <!--Slider Description example-->
    <div class="slide-desc">
      <h2>Slider Title 1</h2>
      <p>Demo description here. <a class="more" href="#">more</a></p>
    </div>
  </li>
  <li><img src="slides/2.jpg" />
    <div class="slide-desc">
      <h2>Slider Title 2</h2>
      <p>Demo description here. <a class="more" href="#">more</a></p>
    </div>
  </li>
  <li><img src="slides/3.jpg" /> 
    <!--NO Description Here--> 
  </li>
</ul>

3. Initialize the plugin to generate a basic crossfading slideshow.

$('#demo').skdslider();

4. Initialize the plugin to generate a basic slider.

$('#demo').skdslider({animationType:'sliding'});

5. Available options.

$('#demo').skdslider({

  // Delay duration between two slides in ms.
  'delay': 2000,

  // Animation speed
  'animationSpeed': 500,

  // show/hide navigation icon
  'showNav': true,

  // Automatically start slideshow
  'autoSlide': true,

  // show/hide next/prev buttons
  'showNextPrev': false,

  // Pause sliding on mouse hover
  'pauseOnHover': false,

  // If true, navigation will be numeric
  'numericNav': false,

  // If this properties is set, sliding will automatically stop at the specified slide
  'stopSlidingAfter': false,

  // show/hide play button
  'showPlayButton': false,

  // 'fading' or 'sliding'
  'animationType': 'fading' /* fading/sliding */
  
});

---

This awesome jQuery plugin is developed by putheakhem. For more Advanced Usages, please check the demo page or visit the official website.