Auto Image Slider in HTML Source Code

This HTML source code helps you to create an auto image slider on your website. It displays multiple images in a sequence. The slider transitions between images automatically. It helps showcase multiple images in a space-saving manner.

You can use this code on your website’s homepage to showcase featured images. It enhances user engagement by grabbing attention with dynamic visuals. Plus, it’s easy to implement and adds visual appeal to your website.

How to Create Auto Image Slider In Html Source Code

1. Start by creating the HTML structure for your slider. Define a container for the slider and add individual slides inside it. Each slide should contain an image.

<span id="heading">Simple automatic slider</span>
<div id="slider">  
<div class="slides">  
  <img src="https://hhsbanner.com/wp-content/uploads/2019/03/victoria_falls-900x300.jpg" width="100%" />
 </div>
  
  <div class="slides">  
  <img src="https://blog.cognifit.com/wp-content/uploads/2019/11/hiking-900x300.jpg" width="100%" />
</div>
  
  <div class="slides">  
  <img src="https://travelfree.info/wp-content/uploads/2018/02/croatia-waterfall-in-deep-forest-of-Cr-12755165-900x300.jpg" width="100%" />
</div> 
  
   <div class="slides">  
  <img src="https://www.piemonturismo.it/site/wp-content/uploads/2014/07/13-laghi-grande.jpg" width="100%" />
</div> 
  
<div class="slides">  
  <img src="https://improvephotography.com/wp-content/uploads/2017/09/Julian-Baird-20170914-3-900px.jpg" width="100%" />
</div>  
  
  <div id="dot"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
 </div>

2. Now, let’s style the slider and its components using CSS. This will include setting up the layout, transitions, and responsiveness.

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
@keyframes fade{
  from{
    opacity:0.4;
  }
  to{
    opacity:1;
  }
}

body{
  background:#eeeee;
}

#slider{
  margin:0 auto;
  width:80%;
  overflow:hidden;
}

.slides{
  overflow:hidden;
  animation-name:fade;
  animation-duration:1s;
  display:none;
}

img{
  width:100%;
}

#dot{
  margin:0 auto;
  text-align:center;
}
.dot{
  display:inline-block;
  border-radius:50%;
  background:#d3d3d3;
  padding:8px;
  margin:10px 5px;
}

.active{
  background:black;
}

@media (max-width:567px){
  #slider{
    width:100%;

  }
}

#heading{
  display:block;
  text-align:center;
  font-size:2em;
  margin:10px 0px;

}

3. Finally, let’s add JavaScript to make the slider automatically transition between slides.

var index = 0;
var slides = document.querySelectorAll(".slides");
var dot = document.querySelectorAll(".dot");

function changeSlide(){

  if(index<0){
    index = slides.length-1;
  }
  
  if(index>slides.length-1){
    index = 0;
  }
  
  for(let i=0;i<slides.length;i++){
    slides[i].style.display = "none";
    dot[i].classList.remove("active");
  }
  
  slides[index].style.display= "block";
  dot[index].classList.add("active");
  
  index++;
  
  setTimeout(changeSlide,2000);
  
}

changeSlide();

You can now customize the slider by adding more slides, adjusting CSS styles, and modifying JavaScript behavior to suit your needs. Once you’re satisfied with the result, integrate the slider into your website by copying the HTML, CSS, and JavaScript code into your project files.

That’s it! You’ve successfully created an auto image slider using HTML, CSS, and JavaScript. Enjoy showcasing your images engagingly and dynamically on your website!