Touch-friendly Image Carousel Library – JS-Carousel

Category: Javascript , Slider | November 10, 2018
Views Total:815 views
Official Page:Go to website
Last Update:November 10, 2018


Touch-friendly Image Carousel Library – JS-Carousel


A responsive, touch-friendly image carousel implemented in vanilla JavaScript.

The users are able to switch between images with mouse drag and touch swipe events.

How to use it:

Install the JS-Carousel with NPM:

$ npm install js-carousel --save

Import the JS-Carousel.

// ES6
import jscarousel from 'js-carousel';
<!-- Or -->
<script src=""></script>

Add a series of images to the carousel container.

<div id="carousel-container">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">

Enable the carousel and done.

jscarousel(document.getElementById('carousel-container'), {
  // options here

Customize the animation speed and autoplay interval.

jscarousel(document.getElementById('carousel-container'), {
  animationSpeed: 500,
  itemDuration: 1500

Set how far the user must swipe before it is considered a swipe.

jscarousel(document.getElementById('carousel-container'), {
  swipeThreshold: 150

Stop the carousel whenever you want.



v1.3.7 (11/10/2018)

  • used setAttribute to set style property;

v1.3.6 (11/03/2018)

  • don’t use translateX

v1.3.4 (10/27/2018)

  • added stop functionality

v1.2.4 (10/12/2018)

  • more performance optimization;

You Might Be Interested In:

Leave a Reply