vanilla-js-carousel

Vanilla JavaScript Carousel

Tiny (1Kb gzipped) JavaScript carousel with all the basic features.

— Inspired by the blazing fast, lightweight, cross-platform and crazy popular Vanilla JS framework.

Demo

---

Carousel

Installation

---

1. Via NPM:

   npm install --save vanilla-js-carousel
   

   or in case you love shortcuts:

   npm i --S vanilla-js-carousel
   

2. Old school:

   <script src="dist/vanilla-js-carousel.min.js"></script>
   

Usage

---

1. Include the CSS and feel free to edit it or write your own:

   <link rel="stylesheet" href="dist/vanilla-js-carousel.css" />
   

2. Write some markup:

   <div class="js-Carousel" id="carousel">
       <ul>
           <li><img src="image-1.jpg" alt=""></li>
           <li><img src="image-2.jpg" alt=""></li>
           <li><img src="image-3.jpg" alt=""></li>
       </ul>
   </div>
   

3. If you installed via NPM:

   const Carousel = require("vanilla-js-carousel");
   

4. Initialize the carousel:

   var carousel = new Carousel({
       elem: 'carousel',    // id of the carousel container
       autoplay: false,     // starts the rotation automatically
       infinite: true,      // enables the infinite mode
       interval: 1500,      // interval between slide changes
       initial: 0,          // slide to start with
       dots: true,          // show navigation dots
       arrows: true,        // show navigation arrows
       buttons: false,      // hide play/stop buttons,
       btnStopText: 'Pause' // STOP button text
   });
   
   // Show slide number 3 (Numeration of slides starts at 0)
   carousel.show(2);
   
   // Move to the next slide
   carousel.next();
   

Options

---

Settings

Option	Type	Default	Description
elem	string	carousel	The id of the carousel container in the HTML markup
interval	int	3000	Auto play interval in milliseconds
initial	int	0	Index of the slide to start on
autoplay	boolean	false	Enables auto play of slides
infinite	boolean	false	Enables infinite mode
dots	boolean	true	Display navigation dots
arrows	boolean	true	Display navigation arrows (<prev>/<next>)
buttons	boolean	true	Display navigation buttons (<stop>/<play>)

Button titles

Option	Type	Default	Description
btnPlayText	string	Play	Text for <play> button
btnStopText	string	Stop	Text for <stop> button
arrPrevText	string	&lsaquo;	Text for <prev> arrow
arrNextText	string	&rsaquo;	Text for <next> arrow

Methods

---

Method	Argument	Description
.show(index)	index: int	Moves the carousel to slide by index
.live()		Returns the current slide's index
.prev()		Triggers previous slide
.next()		Triggers next slide
.play()		Starts the autoplay
.stop()		Stops the autoplay

Run the tests

---

npm test

Browser support and dependencies

---

Browser	Support	Dependencies
Chrome	yes	-
Firefox	yes	-
Safari	yes	-
Opera	yes	-
IE	yes*	Polyfill for .classList in IE9

* IE9 and up

License

---

Free. Unlicense.

Changelog

[3.0.0] - 2017-04-24

Changed

1. [ BREAKING ] <circular> to <infinite> in carousel options
2. [ BREAKING ] CSS classes re-named to follow the SUIT naming convention

Removed

1. [ BREAKING ] - Ability to change CSS classes through options