Responsive Full-Width jQuery Image Slider Plugin - skdslider

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/hide navigation icon.
  'showNextPrev': true, 
  // If true, navigation will be numeric
  'numericNav': false,
  // Enable auto play
  'autoSlide': true,
  // Pause on hover
  // Show play button

Change log:


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

  • Publication date: 03.01.2018
  • Source