Vanilla JavaScript Carousel

Demo

Download

Available on GitHub or npm

Installation

1. Download as an npm package

   npm i vanilla-js-carousel

   or include the script in your page

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

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

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

3. Set up your 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>
           <li><img src="image-4.jpg" alt=""></li>
           <li><img src="image-5.jpg" alt=""></li>
       </ul>
   </div>

4. If you installed via npm

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

5. Initialize the carousel

   var carousel = new Carousel({
       elem: 'carousel',    // id of the carousel container
       autoplay: true,      // starts the rotation automatically
       infinite: true,      // enables 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 the 3rd slide (Numeration of slides starts at 0)
   carousel.show(2);
   
   // Move to the next slide
   carousel.next();

Options

Methods

Licence