Touch-friendly Image Carousel Library – JS-Carousel

Category: Javascript , Slider | November 10, 2018
Author: aprilmintacpineda
Views Total: 509
Official Page: Go to website
Last Update: November 10, 2018
License: MIT

Preview:

Touch-friendly Image Carousel Library – JS-Carousel

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;

You Might Be Interested In:

Leave a Reply