Easy Mobile-friendly Carousel Slider For jQuery

Easy Mobile-friendly Carousel Slider For jQuery
File Size: 1.29 MB
Views Total: 1741
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

carousel-slider.js is a simple, lightweight, flexible, customizable, touch-enabled carousel slider implemented in jQuery.


  • Fully responsive and mobile-friendly.
  • Easy to config via data-* attributes. With no JS call.
  • Supports any HTML elements.
  • Supports nested carousel sliders.
  • Keyboard interactions.
  • Touch gestures are supported as well.
  • Configurable autoplay behavior.
  • Useful event handlers.

See also:

How to use it:

1. Just load the main JavaScript carousel-slider.js or cls.min.js (minified, 8kb) after jQuery library and you're ready to go.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<script src="dist/carousel-slider.js"></script>

2. Add slides and controls to the carousel slider. All the configurations can be passed via data attributes as follows:

  • data-​width: the width of the carousel slider
  • data-​height: the height of the carousel slider
  • data-​autoplay: set to 'false' to disable the autoplay
  • data-​speed: animation speed in milliseconds
  • data-​time: the time to wait before transitioning to the next slide
  • data-​overflow: CSS overflow property
  • data-​swipe: set to 'false' to disable the swipe events
<div class="carousel-slider" 

     <!-- slides -->
     <div class="inner">
       <div class="slide" style="background:lightblue">
         <div class="content"><p>Page 1</p></div>
        <div class="slide" style="background:lightgreen">
          <div class="content"><p>Page 2</p></div>
    <!-- controls -->
    <div class="arrow left">&#10094;</div>
    <div class="arrow right">&#10095;</div>
    <p class="pause">Pause</p>
    <p class="play">Play</p>

3. Available events.

  // on play

  // on pause

  // click the left arrow

  // click the right arrow

  // when back to prev slide

  // when goto next slide

  // swipe left

  // swipe right

  // tap the left arrow

  // tap the right arrow

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