This time I will share jQuery Plugin and tutorial about Responsive Full Width Slider Plugin For jQuery – skdslider, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery.js"></script> |
2 |
<script src="src/skdslider.min.js"></script> |
3 |
<link href="src/skdslider.css" rel="stylesheet"> |
2. Add a list of web content to the slider like this:
01 |
<ul id="demo" class="slides"> |
02 |
<li> <img src="slides/1.jpg" /> |
04 |
<div class="slide-desc"> |
05 |
<h2>Slider Title 1</h2> |
06 |
<p>Demo description here. <a class="more" href="#">more</a></p> |
09 |
<li><img src="slides/2.jpg" /> |
10 |
<div class="slide-desc"> |
11 |
<h2>Slider Title 2</h2> |
12 |
<p>Demo description here. <a class="more" href="#">more</a></p> |
15 |
<li><img src="slides/3.jpg" /> |
3. Initialize the plugin to generate a basic crossfading slideshow.
1 |
$('#demo').skdslider(); |
4. Initialize the plugin to generate a basic slider.
1 |
$('#demo').skdslider({animationType:'sliding'}); |
5. Available options.
01 |
$('#demo').skdslider({ |
07 |
'animationSpeed': 500, |
16 |
'showNextPrev': false, |
19 |
'pauseOnHover': false, |
25 |
'stopSlidingAfter': false, |
28 |
'showPlayButton': false, |
31 |
'animationType': 'fading' |
This awesome jQuery plugin is developed by putheakhem. For more Advanced Usages, please check the demo page or visit the official website.
