Simple Responsive Carousel Slideshow with Vanilla JavaScript

Preview:

Description:

A simple to use, pure vanilla Javascript slideshow which allows the visitor to cycle through a series of html content with both arrows and bullets navigation.

Basic usage:

Load the slideshow.css stylesheet and slideshow.js script in your document.

<link rel="stylesheet" href="dist/slideshow.css">
<script src="dist/slideshow.js"></script>

Insert slide content, arrows/bullets navigation and images caption into the slideshow as displayed below.

<div class="che-slideshow">
  <ol class="slideshow-indicator-container">
    <li class="slideshow-indicator">
    </li>
    <li class="slideshow-indicator inactive-indicator" >
    </li>
    <li class="slideshow-indicator inactive-indicator" >
    </li>
    <li class="slideshow-indicator inactive-indicator" >
    </li>
  </ol>
  <div class="slideshow-left-control slideshow-control">
    <img src="images/left-arrow.png" class="slideshow-left-arrow slideshow-arrow">
  </div>
  <div class="slideshow-right-control slideshow-control">
    <img src="images/right-arrow.png" class="slideshow-right-arrow slideshow-arrow">
  </div>
  <div class="che-slideshow-slide">
    <img src="1.jpg">
    <div class="che-slideshow-caption">
      This is a caption for a photo.
    </div>
  </div>
  <div class="che-slideshow-slide inactive">
    <img src="2.jpg">
    <div class="che-slideshow-caption">
      This is a caption for a photo.
    </div>
  </div>
  <div class="che-slideshow-slide inactive">
    <img src="3.jpg">
    <div class="che-slideshow-caption">
      This is a caption for a photo.
    </div>
  </div>
  <div class="che-slideshow-slide inactive">
    <img src="4.jpg">
    <div class="che-slideshow-caption">
      This is a caption for a photo.
    </div>
  </div>
</div>

Add event listeners.

(function () {
  var prevArrow = document.getElementsByClassName('slideshow-left-control')[0];
  var nextArrow = document.getElementsByClassName('slideshow-right-control')[0];
  prevArrow.addEventListener('click', CHESLIDESHOW.prevSlide);
  nextArrow.addEventListener('click', CHESLIDESHOW.nextSlide);
})();