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="https://use.fontawesome.com/releases/v5.X.X/css/all.css" />

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

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

4. Initialize the plugin to generate a default carousel.

$('.example').jdSlider();

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

$('.example').jdSlider({

  // 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.

$('.example').jdSlider({

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

});

7. Event handlers.

$('.example').jdSlider({

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

});

Changelog:

2021-01-22

• v0.1.3.1

2018-10-24

• 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.