Generic Pure JavaScript Carousel Library – pureJSCarousel

pureJSCarousel is a pure JavaScript library for generating a touch-enabled, configurable,  smooth content carousel from a set of HTML elements.

How to use it:

Insert a set of html content into the carousel.

<div class="carousel">
  <div class="item">Slide 1</div>
  <div class="item">Slide 2</div>
  <div class="item">Slide 3</div>
  ...
</div>

Include the pureJSCarousel’s JavaScript and CSS files in the HTML document.

<link rel="stylesheet" href="purejscarousel.css" />
<script src="purejscarousel.js"></script>

Initialize the content carousel.

const myCarousel = new PureJSCarousel({
      carousel: '.carousel',
      slide: '.item'
});

Available options with default values.

// display next / prev buttons
btnNext: false,
btnPrev: false,
// infinite loop
infinite: false,
// scroll elements one by one
oneByOne: false,
// animation speed
speed: 400,
// transition effect
effect: 'linear',
// transition delay
delay: 0,
// autoplay options
autoplay: false,
autoplayDelay: 400,
autoplayDirection: 'next'

API methods.

// Go to next slide: 
myCarousel.goToNext();
// Go to prev slide: 
myCarousel.goToPrev();
// Go to slide: 
myCarousel.goTo(slideIndex);
// Update carousel: 
myCarousel.update();
// Disable carousel control: 
myCarousel.disableControl();
// Enable carousel control: 
myCarousel.enableControl();
// Destroy: 
myCarousel.destroy();
// Start autoplay: 
myCarousel.startAutoplay(autoplayDirection);
// Stop autoplay: 
myCarousel.stopAutoplay();

Changelog:

02/21/2020

• Fix bug with slide by touch (for oneByOne enabled)