Touch-enabled Pure JavaScript Carousel

Preview:

Description:

A basic, mobile friendly JavaScript carousel that enables you slide infinitely through a group of html elements with touch swipe support.

How to use it:

Load the required stylesheet and JavaScript in the webpage.

<link href="css/pure-js-carousel.css" rel="stylesheet">
<script src="js/pure-js-carousel.js"></script>

Add a group of html elements for the carousel.

<div class="carousel">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
  <div>Slide 6</div>
  <div>Slide 7</div>
  <div>Slide 8</div>
  <div>Slide 9</div>
</div>

Initialize the carousel.

pureJSCarousel({
  container: '.carousel',
  infinite : true
});

All default options.

// CSS selectors
item: 'div'
nextBtn: document.createElement('button')
prevBtn: document.createElement('button')
// inifinite loop
infinite: false
// scroll one by one
scrollingOneByOne: false
// animation speed
speed: 500
// animation effect
effect: 'ease'
// delay time
delay: 0
// callbacks
onInit: false
onResize: false