Responsive Full-Width jQuery Image Slider Plugin - skdslider

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

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.

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 options

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo').skdslider({
'delay':5000, // Delay duration between two slides in micro seconds. 
'fadeSpeed': 2000, // Fading Speed in micro seconds.
'showNav': true, // It will show/hide navigation icon.
'numericNav': false // If true, navigation will be numeric
});
});
</script>

Change log:

v1.2.0 (2013-12-26)

  • Sliding effect added
  • Next/prev fixed

v1.0.2 (2013-07-22)


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