Generic Carousel/Slideshow For The Web - jdSlider

File Size: 79.9 KB
Views Total: 15824
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Generic Carousel/Slideshow For The Web - jdSlider

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.

<link rel="stylesheet" href="./css/jquery.jdSlider.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="./js/jquery.jdSlider-latest.min.js"></script>

2. Import the latest Font Awesome for the icons.

<link rel="stylesheet" href="" />

3. Add slides together with navigation & pagination controls to the carousel.

<section class="jd-slider example">
  <div class="slide-inner">
    <ul class="slide-area">
        Slide 1
        Slide 2
        Slide 3
  <a class="prev" href="#">
    <i class="fas fa-angle-left fa-2x"></i>
  <a class="next" href="#">
    <i class="fas fa-angle-right fa-2x"></i>
  <div class="controller">
    <div class="indicate-area"></div>

4. Initialize the plugin to generate a default carousel.


5. The plugin comes with lots of options to customize the carousel.


  // enable/disable the carousel
  isUse: true,

  // wrapper element
  wrap: null,

  // default CSS selectors
  slide: '.slide-area',
  prev: '.prev',
  next: '.next',
  indicate: '.indicate-area',
  auto: '.auto', 
  playClass: 'play',
  pauseClass: 'pause',
  noSliderClass: 'slider--none', 
  willFocusClass: 'will-focus', 
  unusedClass: 'hidden', 

  // how many slides to display at a time
  slideShow: 1,

  // how many slides to scroll at a time
  slideToScroll: 1,

  // start slide
  slideStart: 1,

  // margin property
  margin: null, 

  // animation speed
  speed: 500, 

  // easing
  timingFunction: 'ease',
  easing: 'swing',

  // autoplay interval
  interval: 4000, 

  // touch throttle
  touchDistance: 20, 

  // resistance ratio
  resistanceRatio: .5,

  // is overflow
  isOverflow: false,

  // shows indicator
  isIndicate: true,

  // is autoplay
  isAuto: false,

  // is infinite loop
  isLoop: false,

  // false: use fade animation instead
  isSliding: true,

  // pause on hover
  isCursor: true,

  // enable touch event
  isTouch: true,

  // enable drag event
  isDrag: true,

  // enable swipe resistance
  isResistance: true,

  // auto playback
  isCustomAuto: false, 

  // auto playback
  autoState: 'auto',

  // custom indicator
  indicateList: function (i) {
      return '<a href="#">' + i + '</a>'; 

  // progress function
  progress: function () {}


6. Set the options when the carousel is running on different devices.


  responsive: [
      viewSize: 768, // breakpoint(0~768)
      settings: {
        // options here
    }, {
      viewSize: 1024, // break point (769~1024)
      settings: {
        // options here


7. Event handlers.


  onPrev: function () {},
  onNext: function () {},
  onIndicate: function () {},
  onAuto: function () {}




  • v0.1.3.1


  • v0.1.3

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