Easy Mobile-friendly Carousel Slider For jQuery

Easy Mobile-friendly Carousel Slider For jQuery
File Size: 1.29 MB
Views Total:
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.

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:

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.