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:

• Top 50 Best Carousel jQuery Plugins

How to use it:

1. Include jQuery javascript library on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></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">
<ul>

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

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

...

</ul>
</div>

4. Call the plugin with default options.

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

5. Possible plugin options with default values.

jQuery('#demo').skdslider({

  // Delay duration between two slides
  'delay':5000, 

  // 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
  'pauseOnHover':false,

  // Show play button
  'showPlayButton':false,

  // 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:

2018-02-26

• restructure & re-coding

2018-01-03

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