Carousel Slideshow jdSlider - Free Download Generic Carousel/Slideshow For The Web - jdSlider

Free Download Generic Carousel/Slideshow For The Web – jdSlider

Posted on

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.

Carousel Slideshow jdSlider - Free Download Generic Carousel/Slideshow For The Web - jdSlider
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.

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