Simple Image Carousel Slider With Pure JavaScript

Category: Javascript , Slider | September 6, 2015
Views Total:5,468 views
Official Page:Go to website
Last Update:September 6, 2015


Simple Image Carousel Slider With Pure JavaScript


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: [
    // 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);
      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;

You Might Be Interested In:

Leave a Reply