Fullscreen Image Slideshow In Native JavaScript

Preview:

Description:

Just another responsive, fullscreen slideshow written in pure JS that automatically fades through a group of images at a given speed.

How to use it:

Add images, navigation arrows and pagination dots to the slideshow.

<section id="slider-container">
  <!-- slide -->
  <div class="slide fade" id="slide-0">
    <!-- slide image -->
    <img src="./images/img1.jpg" alt="First Image">
  </div>
  <!-- slide -->
  <div class="slide fade" id="slide-1">
    <!-- slide image -->
    <img src="./images/img2.jpg" alt="Second Image">
  </div>
  <!-- slide -->
  <div class="slide fade" id="slide-2">
    <!-- slide image -->
    <img src="./images/img3.jpg" alt="Third Image">
  </div>
  <!-- arrows -->
  <div id="arrows-wrapper" class="">
    <!-- previous arrow -->
    <p class="slider-arrow center_y" id="arrow-prev">&#10094;</p>
    <!-- next arrow -->
    <p class="slider-arrow center_y" id="arrow-next">&#10095;</p>
  </div>
  <!-- dots -->
  <div id="dots-wrapper" class="center_x">
    <!-- dot navigation for each slide -->
    <div class="dot-navigation"></div>
    <!-- dot navigation for each slide -->
    <div class="dot-navigation"></div>
    <!-- dot navigation for each slide -->
    <div class="dot-navigation"></div>
   
          
  </div>
</section>

The necessary CSS styles. Feel free to modify, override the following snippets to create your own slideshow styles.

#slider-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.slide{
  width: 100%;
  height: 100%;
  
}
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide{
  position: absolute;
}
.slider-arrow {
  color: #fff;
  font-size: 50px;
  cursor: pointer;
}
#arrow-prev{
  left: 20px;
  position: absolute;
}
#arrow-next{
  right: 20px;
  position: absolute;
}
#dots-wrapper{
  display: flex;
  position: absolute;
  bottom: 30px;
}
.dot-navigation{
  width: 15px;
  height: 15px;
  border-radius: 100%;
  cursor: pointer;
  margin: 0 4px;
  border: 2px solid whitesmoke;
  transition: .5s background-color;
}
.dot-navigation:hover{
  background-color: cornflowerblue;
}
/* creating class active-dot which will get add into the dot that indicates what image is displayed */
.active-dot {
  background-color: rosybrown;
}
/* fade animation */
.fade{
  animation-name: fade;
  animation-duration: .5s;
}
@keyframes fade{
  from {opacity: .4}
  to {opacity: 1}
}

The main JavaScript to enable the slideshow.

// initialize slideindex with 0 as you want to show the first slide first
var SLIDEINDEX = 0;
showSlides(SLIDEINDEX);
// creating function for showing slides
function showSlides(index){
  // lets select all the slides and dots using querySelectorAll method
  var slides = document.querySelectorAll(".slide");
  var dots = document.querySelectorAll(".dot-navigation");
  // if slide index value is greater than length of slides then jump to 1st slide
  if (index >= slides.length){
      SLIDEINDEX = 0;
  // if we want to jump at the last of the slide incase the user is at the first one
  } else if (index < 0) {
      SLIDEINDEX = slides.length - 1;
  } else{
      SLIDEINDEX = SLIDEINDEX;
  }
  // before showing slides we must hide all the slides and remove active-dots class using for loop
  for (var i = 0; i < slides.length; i++){
      // hide slide elements
      slides[i].style.display = "none";
      // hide dots active-dot class
      dots[i].classList.remove("active-dot");
  }
  // show the slide we want and set the dot class active-dot
  slides[SLIDEINDEX].style.display = "block";
  dots[SLIDEINDEX].classList.add("active-dot");
      
};
// select the previous arrow element and add a click event using addEventListener method
document.querySelector("#arrow-prev").addEventListener("click", function(){
  // decrement SLIDEINDEX value to go to previous slide
  showSlides(--SLIDEINDEX);
});
// select the next arrow element and add a click event using addEventListener method
document.querySelector("#arrow-next").addEventListener("click", function(){
  // decrement SLIDEINDEX value to go to previous slide
  showSlides(++SLIDEINDEX);
});
// select all the dots using querySelectorAll and iterate over each one using forEach method
document.querySelectorAll(".dot-navigation").forEach(function(element){
  element.addEventListener("click", function(){
      // make a real array using slice method from array proptotype followed by call method
      var dots = Array.prototype.slice.call(this.parentElement.children);
      // make a dot index variable of the array we have created above
      var dotIndex = dots.indexOf(element);
      // save slideindex value to dot index
      showSlides(SLIDEINDEX = dotIndex);
  });
});
// lets set our slide automatic using setInterval method
setInterval(function(){
  showSlides(++SLIDEINDEX);
}, 5000);