Easy Mobile-friendly Carousel Slider For jQuery

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

Features:

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

• Top 50 Best Carousel jQuery Plugins

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" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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" 
     data-width="100vw" 
     data-height="100vh">

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

3. Available events.

$('.carousel-slider').on('cls-play',function(){
  // on play
})

$('.carousel-slider').on('cls-pause',function(){
  // on pause
})

$('.carousel-slider').on('clickLeft',function(){
  // click the left arrow
})

$('.carousel-slider').on('clickRight',function(){
  // click the right arrow
})

$('.carousel-slider').on('left',function(){
  // when back to prev slide
})

$('.carousel-slider').on('right',function(){
  // when goto next slide
})

$('.carousel-slider').on('swipeLeft',function(){
  // swipe left
})

$('.carousel-slider').on('swipeRight',function(){
  // swipe right
})

$('.carousel-slider').on('touchLeft',function(){
  // tap the left arrow
})

$('.carousel-slider').on('touchRight',function(){
  // 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.