Responsive Full-Width jQuery Image Slider Plugin - skdslider

File Size: 3.21 MB
Views Total: 71985
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Full-Width jQuery Image Slider Plugin - skdslider

jQuery skdslider is a lightweight and easy-to-use jQuery plugin that allows you to create a responsive and full-width image slider with auto-play, dots/number navigation and fade animation support.

View more:

How to use it:

1. Include jQuery javascript library on your web page

<script src=""></script>

2. Include jQuery skdslider plugin files on the page

<script src="src/skdslider.js"></script>
<link href="src/skdslider.css" rel="stylesheet">

3. Create the html for the image slider

<div id="demo" class="skdslider">

<li> <img src="slides/1.jpg" /> 
<div class="slide-desc">
<h2>Slider Title 1</h2>
<p>Description 1.</p>

<li><img src="slides/2.jpg" />
<div class="slide-desc">
<h2>Slider Title 2</h2>
<p>Description 2.</p>



4. Call the plugin with default options.


5. Possible plugin options with default values.


  // Delay duration between two slides

  // Animation speed
  'animationSpeed': 500,

  // Show navigation
  showNav: true,

  // Show/hide navigation icon.
  'showNextPrev': true, 

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

  // Enable auto play
  'autoSlide': true,

  // Pause on hover

  // Show play button

  // Stop sliding when reaching the last slide
  stopSlidingAfter: false,
  // fading or sliding
  animationType: 'fading',
  // Selector of slides
  slideSelector: '.slide',
  // Active class
  activeClass: 'active',
  // callback
  onMarkup: function() {},


Change log:


  • restructure & re-coding


  • Bugfix
  • Options updated

v1.2.0 (2013-12-26)

  • Sliding effect added
  • Next/prev fixed

v1.0.2 (2013-07-22)

  • version update

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