Author: | aprilmintacpineda |
---|---|
Views Total: | 811 views |
Official Page: | Go to website |
Last Update: | November 10, 2018 |
License: | MIT |
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/js-carousel@latest/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;