Simple Auto Playing Slideshow

This JavaScript code snippet helps you to create a simple auto playing image slideshow. It comes with a simple interface to play images with sliding effect. You can easily integrate this slideshow as a showcase or general purpose images slideshow.

How to Create Simple Auto Playing Slideshow

1. First of all, create the HTML structure as follows:

  <h2>Pure JavaScript Slider.</h2>
<h5>No jQuery was harmed!</h5>

<div class="slider__container">
<div class="slider" data-js="sslide">
  <img src="https://cdn.eyeem.com/thumb/h/800/eaa71c732cbee5701edb4e0e937feb3222ed4a20-1386257098" />
  <img src="https://cdn.eyeem.com/thumb/h/800/28b3b67fe9d1015a9738b3be7a8a7ae8f4a60421-1392731499"/>
  <img src="https://cdn.eyeem.com/thumb/h/800/3343d0501110d31ec2e424ebcf92106c7195587d-1389594002" />
  <img src="https://cdn.eyeem.com/thumb/h/800/b93b2e1e77cd05a6ec4139f5e31b9c8809223654-1385122399" />
  <img src="https://cdn.eyeem.com/thumb/h/800/5cacad00f9fb6574a1b58d76f55f87b0d972203e-1385563404" />  
  <img src="https://cdn.eyeem.com/thumb/h/800/d3ee24ea591d90f690c3f2819878097cff8272f9-1384525350" />
  <img src="https://cdn.eyeem.com/thumb/h/800/e3b6546ac1dfa8b261da5c3dbb40449d6edef0bb-1381759073" />
  <img src="https://cdn.eyeem.com/thumb/h/800/7102e8edb21b3e5a31f8f9067d6b024c58c38137-1381507137" />
  <img src="https://cdn.eyeem.com/thumb/h/800/60e487d3a8683c8d83c75e8790f25cd822bb70ad-1381150604" />
  <img src="https://cdn.eyeem.com/thumb/h/800/bce02b5cec78a8fd45772530775ecc5fe610524a-1379255277"  />
  <img src="https://cdn.eyeem.com/thumb/h/800/506905a65fa0d57d71a0bf90c1741cb9120bf0c3-1378290101"  />
  <img src="https://cdn.eyeem.com/thumb/h/800/4c60d57c4d80c9d9a26bcd8882c6d4a1e7fa0b9a-1374858049"  />
</div>
</div>

2. After that, add the following CSS styles to your project:

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font: 1rem/1.3 Arial, Helvetica, sans-serif;
}

h2, h5 {
  text-align: center;
}

h5 {
  text-transform: uppercase;
  color: #aeaeae;
}

.slider__container {
  width: 40em;
  height: 25em;
  margin: 1.5em auto;
  overflow: hidden;
}

.slider img {
  float: left;
}

3. Finally, add the following JavaScript code and done.

document.addEventListener('DOMContentLoaded', function() {
  // sslider = Simple SLIDER
  function sslider() {
    
    var current = 0,
        i,
        slider = document.querySelector('[data-js="sslide"]'),
        allImages =  slider.querySelectorAll('img'),
        imgWidth = Math.ceil(100 / allImages.length),
        sliderWidth = allImages.length * 100;
    
    slider.style.width = sliderWidth + '%';
    
    for(i = 0; i <= allImages.length - 1; i++) {
       allImages[i].style.width = imgWidth + '%';
    }

  function animateRight(cur) {
      var i = imgWidth,
          time = 50;
      var animate = setInterval(function() {
      if(i <= sliderWidth) {
        allImages[cur].style.marginLeft = "-" + i + "%";
        i--;
      } else {
        clearInterval(animate);
      }
      }, time);  
   } 
    
    function reset() {
      for(i = 0; i <= allImages.length - 1; i++) {
        animateRight(i);
      }
      // resseting the current image to the first image
      current = 0;
    }    
    
    function animateLeft(cur) {
      var i = 0,
          time = 50;
      var animate = setInterval(function() {
      if(i <= imgWidth) {
        allImages[cur].style.marginLeft = "-" + i  + "%";
        i++;
      } else {
        clearInterval(animate);
      }
      }, time);  
   }
    
    setInterval(function () {
      if(current <= allImages.length - 2) {
        animateLeft(current);
        current++;
        
      } else {
        reset();
      }
    }, 3000);
} // end
 sslider();
});

That’s all! hopefully, you have successfully integrated this slideshow code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.