Realy Simple Javascript Image Slideshow

October 02, 2021 by Brainplugg Team

5 min easy javascript slideshow script:

We need a slideshow to rotate through some images. We don't need anything fancy and we don't want to load a bloated engine to acomplish this task

I noticed a lot of developers using plugins for such a simple task....enough owl, bx, nuvo, and flickity sliders...let's see how simple we can make this snippet

REQUIREMENTS

• A continous loop of images
• We can do this with plain JS or rely on jQuery
• This should be cross browser compatible

    <script type="text/javascript">
    var i=2;
    var totalslides = 4;
    var time = 2500;

    $("img.simple").attr("src","img/trek1.jpg");

    setInterval(function(){
      $("img.simple").attr("src","img/trek"+i+".jpg");
      if (i==totalslides) {
        i=0;
      }
      i++;
    },time);
    </script>
  

    <script type="text/javascript">
    var i=2;
    var totalslides = 4;
    var time = 2500;

    document.querySelector("img.simple").src = "img/trek1.jpg";

    setInterval(function(){
      document.querySelector("img.simple").src = "img/trek"+i+".jpg";
      if (i==totalslides) {
        i=0;
      }
      i++;
    },time);
    </script>
  

Updated: October 2021

Feel free to share this Source Code and use on your personal Website Projects.
All scripts and snippets authored by https://www.brainplugg.com