Vanilla JS

Vanilla JavaScript Carousel

Tiny (1Kb gzipped) JavaScript carousel with all the features most of us will ever need.

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

General
Option Type Default Description
elem string 'carousel' The id of the carousel container
interval int 3000 Auto play interval in milliseconds
initial int 0 Index of the slide to start on
autoplay boolean false Enable 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' <play> button
btnStopText string 'Stop' <stop> button
arrPrevText string '&lsaquo;' <prev> arrow
arrNextText string '&rsaquo;' <next> arrow

Methods

Method Argument Description
.show(index) index: int Move the carousel to slide by index
.live() Return the current slide's index
.prev() Move to previous slide
.next() Move to next slide
.play() Start the autoplay
.stop() Stop the autoplay

Licence

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to http://unlicense.org

Fork me on GitHub