Touch-enabled Pure JavaScript Carousel

Category: Javascript , Slider | August 14, 2015
Views Total:8,673 views
Official Page:Go to website
Last Update:August 14, 2015


Touch-enabled Pure JavaScript Carousel


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>

Initialize the carousel.

  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

You Might Be Interested In:

One thought on “Touch-enabled Pure JavaScript Carousel

Leave a Reply