Touch-enabled Pure JavaScript Carousel

Category: Slider | August 14, 2015
Author: vadimshymko
Views Total: 3,737
Official Page: Go to website
Last Update: August 14, 2015
License: MIT

Preview:

Touch-enabled Pure JavaScript Carousel

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

One thought on “Touch-enabled Pure JavaScript Carousel

Leave a Reply