This time I will share jQuery Plugin and tutorial about Generic Carousel/Slideshow For The Web – jdSlider, hope it will help you in programming stack.
| File Size: | 79.9 KB |
|---|---|
| Views Total: | 9158 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
jdSlider is a simple-to-use yet highly customizable carousel/slideshow plugin designed for both desktop and mobile.
Main features:
- Fully responsive and mobile compatible.
- Semantic and SEO friendly.
- Auto rotation.
- Infinite loop.
- Custom controls.
- Slide or fade animations.
- Easing functions.
- Displays multiple slides at a time.
- Callback functions.
How to use it:
1. Import jQuery JavaScript library and the jdSlider plugin’s files into the html file.
1 |
<link rel="stylesheet" href="./css/jquery.jdSlider.css"> |
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
3 |
<script src="./js/jquery.jdSlider-latest.min.js"></script> |
2. Import the latest Font Awesome for the icons.
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.X.X/css/all.css" /> |
3. Add slides together with navigation & pagination controls to the carousel.
01 |
<section class="jd-slider example"> |
02 |
<div class="slide-inner"> |
03 |
<ul class="slide-area"> |
04 |
<li> |
05 |
Slide 1 |
06 |
</li> |
07 |
<li> |
08 |
Slide 2 |
09 |
</li> |
10 |
<li> |
11 |
Slide 3 |
12 |
</li> |
13 |
</ul> |
14 |
</div> |
15 |
<a class="prev" href="#"> |
16 |
<i class="fas fa-angle-left fa-2x"></i> |
17 |
</a> |
18 |
<a class="next" href="#"> |
19 |
<i class="fas fa-angle-right fa-2x"></i> |
20 |
</a> |
21 |
<div class="controller"> |
22 |
<div class="indicate-area"></div> |
23 |
</div> |
24 |
</section> |
4. Initialize the plugin to generate a default carousel.
1 |
$('.example').jdSlider(); |
5. The plugin comes with lots of options to customize the carousel.
01 |
$('.example').jdSlider({ |
02 |
03 |
// enable/disable the carousel |
04 |
isUse: true, |
05 |
06 |
// wrapper element |
07 |
wrap: null, |
08 |
09 |
// default CSS selectors |
10 |
slide: '.slide-area', |
11 |
prev: '.prev', |
12 |
next: '.next', |
13 |
indicate: '.indicate-area', |
14 |
auto: '.auto', |
15 |
playClass: 'play', |
16 |
pauseClass: 'pause', |
17 |
noSliderClass: 'slider--none', |
18 |
willFocusClass: 'will-focus', |
19 |
unusedClass: 'hidden', |
20 |
21 |
// how many slides to display at a time |
22 |
slideShow: 1, |
23 |
24 |
// how many slides to scroll at a time |
25 |
slideTo<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: 1, |
26 |
27 |
// start slide |
28 |
slideStart: 1, |
29 |
30 |
// margin property |
31 |
margin: null, |
32 |
33 |
// animation speed |
34 |
speed: 500, |
35 |
36 |
// easing |
37 |
timingFunction: 'ease', |
38 |
easing: 'swing', |
39 |
40 |
// autoplay interval |
41 |
interval: 4000, |
42 |
43 |
// touch throttle |
44 |
touchDistance: 20, |
45 |
46 |
// resistance ratio |
47 |
resistanceRatio: .5, |
48 |
49 |
// is overflow |
50 |
isOverflow: false, |
51 |
52 |
// shows indicator |
53 |
isIndicate: true, |
54 |
55 |
// is autoplay |
56 |
isAuto: false, |
57 |
58 |
// is infinite loop |
59 |
isLoop: false, |
60 |
61 |
// false: use fade animation instead |
62 |
isSliding: true, |
63 |
64 |
// pause on hover |
65 |
isCursor: true, |
66 |
67 |
// enable touch event |
68 |
isTouch: true, |
69 |
70 |
// enable drag event |
71 |
isDrag: true, |
72 |
73 |
// enable swipe resistance |
74 |
isResistance: true, |
75 |
76 |
// auto playback |
