Super Simple Image Slider In Vanilla JavaScript – Vanilla Slider

Preview:

Description:

A dead simple, responsive, pure JavaScript slider which loops through a set of images with caption support.

How to use it:

Add images into a slider container and use title attribute to set the image captions.

<div id="my-slider">
  <img class="image" src="1.jpg" alt="Alt 1" title="Image Caption 1">
  <img class="image" src="2.jpg" alt="Alt 2" title="Image Caption 2">
  <img class="image" src="3.jpg" alt="Alt 3" title="Image Caption 3">
  <img class="image" src="4.jpg" alt="Alt 4" title="Image Caption 4">
  <img class="image" src="5.jpg" alt="Alt 5" title="Image Caption 5">
  <div class="caption" id="caption-placeholder"></div>
</div>

The required CSS styles for the image slider.

#my-slider {
  position: relative;
  margin: 0 auto;
  padding-bottom: 15px;
  max-width: 1024px;
  width: 90%;
  height: 300px;
  border-bottom: 1px solid #9a9a9a;
  text-align: center;
  overflow: hidden;
}
#my-slider > img { display: none; }
#my-slider > img:first-child { display: block; }
#my-slider .caption {
  position: absolute;
  bottom: 35px;
  left: 20px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.75);
  text-align: left;
}
@media (min-width:900px) {
#my-slider .caption {
  width: 320px;
  min-height: 54px;
}
}

Load the necessary vanilla-slider.min.js script at the bottom of the document, but before the closing body tag.

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

Initialize the image slider.

vs.set({
  containerId: 'my-slider',
  iterable: '.image',
  after: function (element) {
    var title = element.getAttribute("title");
    document
      .getElementById("caption-placeholder")
      .innerHTML = title;
  }
});

All default configuration options.

/*
 * string: ElementId for the container element; default: 'vs-container'
 */
containerId: 'my-container',
/*
 * string: iterable elements to be visible/hidden; default: 'img' tags
 */
iterable '.images',
/*
 * integer: interval between each element, in milliseconds; default: 4000
 */
timeInterval: 3000,
/*
 * function: a function to be executed before the slider is changed
 */
before: function (element) { },
/*
 * function: a function to be executed after the slider is changed
 */
after: function (element) { },