Simple Image Carousel Slider With Pure JavaScript

Preview:

Description:

A simple, lightweight JavaScript carousel library that allows you to cycle through an array of images when clicked or tapped.

How to use it:

Load the core JavaScript in the document.

<script src="js/Slider.js"></script>

Create a container for the image carousel.

<div id="container"></div>

Insert an array of images to the carousel.

var config = {
    // arbitrary number of images
    images: [
        'images/slide_1.jpg',
        'images/slide_2.jpg',
        'images/slide_3.jpg', 
        'images/slide_4.jpg',
    ],
    // possible values: 'auto', 'manual', 'automanual'
    mode: 'auto',
    // arbitrary interger (miliseconds)
    swipeSpeed: 500,
    // arbitrary interger (miliseconds). This is used in 'auto' and 'automanual' modes
    swipeDelay: 3000
};

Initialize the carousel.

window.onload = function() {
  var sliderElement = document.getElementById('container');
  var slider = new Slider(config);
  slider.init({
      element: sliderElement
  });
};

The sample CSS styles for the carousel.

#container {
  width: 100vw;
  max-height: 600px;
  border: 2px solid black;
  overflow: hidden;
  background-color: #000;
  position: absolute;
  top: 200px;
  left: 0;
}
.slider-list {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 500vw;
}
.slider-list .slide {
  list-style-type: none;
  display: inline-block;
  position: relative;
  left: 0;
  width: 100vw;
}
.slider-list .slide img {
  display: block;
  margin: auto auto;
  max-width: 100vw;
}