Hello friends, Today in this blog you’ll learn how to create an Automatic Image Slider in HTML CSS & JavaScript. Earlier I have shared an Image Slider with controls using JavaScript. But one of my viewers requested me to create an Automatic Image Slider and now I’m going to create this simple automatic image slider in HTML CSS
I’m sure that you have seen the Automatic Image Slider or Sideshow Effect on many websites. A slide show is a presentation of a series of still images on a projection screen or electronic display device, typically in a prearranged sequence. The changes of the images may be automatic and at regular intervals or they may be manually controlled by a presenter or the viewer.
Today in this blog I’ll share the automatic image slider. In this slider, there are five images, and these images automatically change after a certain period. I used JavaScript to change the image after a certain time interval. If you don’t know JavaScript then you can watch this video where I’ve created Automatic Image Slider in HTML & CSS.
Video Tutorial of Automatic Image Slider in HTML CSS
In the video, you’ve seen how this automatic image slider looks like and I hope you’ve understood the basic codes behind creating this image slider. As you know, I used JavaScript to complete this slideshow effect. Using the CSS @keyframes property you can also create this type of image slideshow effect.
If you like this automatic image slider and want to get source codes. You can easily copy the codes from the given copy code boxes as well as you can download source code files. You can use this image slider on your websites and projects.
Automatic Image Slider in HTML CSS [Source Codes]
To create this Automatic program (Image Slideshow Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Automatic Image Slider in HTML CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<div class="images">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
<script>
var indexValue = 0;
function slideShow(){
setTimeout(slideShow, 2500);
var x;
const img = document.querySelectorAll("img");
for(x = 0; x < img.length; x++){
img[x].style.display = "none";
}
indexValue++;
if(indexValue > img.length){indexValue = 1}
img[indexValue -1].style.display = "block";
}
slideShow();
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.content{
height: 400px;
width: 750px;
overflow: hidden;
box-shadow: 1px 1px 15px rgba(0,0,0,0.4);
}
.content .images{
height: 100%;
width: 100%;
}
.images img{
height: 100%;
width: 100%;
}
That’s all, now you’ve successfully created an Automatic Image Slider in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
