Generic Pure JavaScript Carousel Library – pureJSCarousel

Category: Javascript , Slider | February 21, 2020
Author: vadymshymk
Views Total: 3,358
Official Page: Go to website
Last Update: February 21, 2020
License: MIT

Preview:

Generic Pure JavaScript Carousel Library – pureJSCarousel

Description:

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)

You Might Be Interested In:


Leave a Reply