PureJSCarousel

Pure JavaScript carousel plugin (responsive)

Demo: https://vadymshymko.github.io/portfolio/purejscarousel/

If you need something like this in project that use react, please see react-simply-carousel

Browser support

Getting Started

1. Include PureJSCarousel files

<!-- stylesheet -->
<link rel="stylesheet" href="path/to/purejscarousel.css">
<!-- js -->
<script src="path/to/purejscarousel.js"></script>

2. Set up your HTML

<div class="your-selector-for-carousel">
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  <div class="your-selector-for-carousel-slide"> Your Content </div>
  ...
</div>

3. Call the PureJSCarousel

var yourVariable = new PureJSCarousel({
  carousel: '.your-selector-for-carousel',
  slide: '.your-selector-for-carousel-slide'
});

3.1 Options

3.2 Methods

Go to next slide: yourVariable.goToNext();

Go to prev slide: yourVariable.goToPrev();

Go to slide: yourVariable.goTo(slideIndex);

Update carousel: yourVariable.update();

Disable carousel control: yourVariable.disableControl();

Enable carousel control: yourVariable.enableControl();

Destroy: yourVariable.destroy();

Start autoplay: yourVariable.startAutoplay(autoplayDirection);

Stop autoplay: yourVariable.stopAutoplay();