Basic Infinite Carousel with Vanilla JavaScript

Preview:

Description:

A pure vanilla JavaScript library helps you create a simple image slider with basic carousel functionalities such as infinite scrolling, autoplay, pagination and navigation.

How to use it:

Include the vanilla-js-carousel.css which will provide the primary CSS styles for the carousel.

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

Add images to the slider as follow.

<div class="b-carousel" id="carousel">
  <div class="b-carousel__frame">
    <ul class="b-carousel__items">
      <li><img src="1.jpg" alt=""></li>
      <li><img src="2.jpg" alt=""></li>
      <li><img src="3.jpg" alt=""></li>
      <li><img src="4.jpg" alt=""></li>
      <li><img src="5.jpg" alt=""></li>
    </ul>
  </div>
</div>

Include the JavaScript file vanilla-js-carousel.min.js at the bottom of the document so the pages load faster.

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

Calling the function on the top element will turn the image list into a carousel with controls.

var carousel = new Carousel({
    el: "carousel",  // id of the carousel container
    infinite: false, // infinite loop
    autoplay: false, // starts the rotation automatically
    interval: 1500,  // interval between slide changes
    show: 0,      // slide to start with
    dots: true,      // show navigation dots
    arrows: true,    // show navigation arrows
    buttons: true,   // show play/stop buttons
    btnPlayText: 'Play',
    btnStopText: 'Stop',
    arrNextText: '›',
    arrPrevText: '‹'
});
carousel.initSlide();

Changelog

08/06/2018

• Bugfix