Generic Carousel/Slideshow For The Web - jdSlider

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="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="./js/jquery.jdSlider-latest.min.js"></script>

2. Import the latest Font Awesome for the icons.

<link rel="stylesheet" href="" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

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 설정
        // options here
    }, {
      viewSize: 1024, // break point (769~1024)
      settings: {
        // options here

7. Event handlers.

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

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

  • Publication date: 28.09.2018
  • Source