Touch-enabled Carousel / Slider with Pure JavaScript – PureJSCarousel

PureJSCarousel is a standalone JavaScript library that helps you create basic, touch-friendly slider / carousel with lots of customization options.

How to use it:

Add the PureJSCarousel JavaScript library to your webpage when needed.

<script src="pure-js-carousel.js"></script>

Create a group of html content for the slider / carousel.

<div class="carousel" id="demo">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  ...
</div>

The basic CSS styles.

.pure-js-carousel { overflow: hidden; }
.pure-js-carousel-list:before, .pure-js-carousel-list:after {
  content: "";
  display: table;
}
.pure-js-carousel-list:after { clear: both; }
.pure-js-carousel-slide { float: left; }

Style the navigation and pagination whatever you like.

.pure-js-carousel-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 20px;
  margin-top: -35px;
  position: absolute;
  top: 50%;
  width: 20px;
}
.pure-js-carousel-btn-next {
  border-bottom: 3px solid #f00;
  border-right: 3px solid #f00;
  right: 5px;
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
.pure-js-carousel-btn-prev {
  border-bottom: 3px solid #f00;
  border-left: 3px solid #f00;
  left: 5px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.pure-js-carousel-dots {
  float: left;
  margin-top: 15px;
  text-align: center;
  width: 100%;
}
.pure-js-carousel-dot {
  display: inline-block;
  margin: 0 5px;
}
.pure-js-carousel-dot-btn {
  background: green;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}
.active .pure-js-carousel-dot-btn {
  background: blue;
}

Create a new carousel instance as follow.

var carouselDefault = new PureJSCarousel({
    carousel: '#demo',
    slide: '.slide'
});

All configuration options.

var carouselDefault = new PureJSCarousel({
    // CSS selector for carousel wrapper
    carousel: '#carousel-default',
    // CSS selector for carousel items
    slide: '.slide',
    // CSS selectors for next / prev navigation
    btnNext: document.createElement('button'),
    btnPrev: document.createElement('button'),
    // slides the items one by one
    oneByOne: false,
    // animation speed
    speed: 1000,
    // activate slide
    activeIndex: 0,
    // animation delay
    delay: 0,
    // easing effect
    effect: 'linear',
    // autopaly options
    autoplay: false,
    autoplayDelay: 1000,
    autoplayStartDelay: 1000,
    autoplayDirection: 'next',
    // infinite looping
    infinite: false,
});

API methods.

var carouselDefault = new PureJSCarousel({
    carousel: '#carousel-default',
    slide: '.slide'
});
// Go to next slide
carouselDefault.goToNext();
// Go to previous slide
carouselDefault.goToPrev();
// Go to specific slide
carouselDefault.goToNext(slideIndex);
// Disable carousel controls
carouselDefault.disableControl();
// Enable carousel controls
carouselDefault.enableControl();
// Destroy the carousel
carouselDefault.destroy();
// Enable autoplay
carouselDefault.startAutoplay(autoplayDirection);
// Stop autoplay
carouselDefault.stopAutoplay();

Changelog

12/17/2020

• Added v3.0: use transform instead of marginLeft && add startAutoplay and stopAutoplay methods

02/14/2020

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

03/23/2019

• Update JS