Touch-friendly Image Carousel Library – JS-Carousel

Preview:

Description:

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
$ npm install js-carousel --save

Import the JS-Carousel.

// ES6
import jscarousel from 'js-carousel';

<!-- Or -->
<script src="https://www.unpkg.com/[email protected]/lib/index.min.js"></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">
  ...
</div>

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.

stop()

Changelog:

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;