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.
How Can I Create Multiple Sliders At the Same Page???
Bro how did you make this comment panel?
Hi, I like your slideshow display but at then end of the image list it goes to a blank image. Also when the slideshow starts it removes all of the other images from my webpage.
I know this web site presents quality dependent articles and additional information, is there any
other website which offers such data in quality?
I’m really glad that my contents are helpful for you. Keep visiting 🙂
Sorry, I can’t public my hosting provider. You can contact me at [email protected]
Yes you're right…To solve this first select the parent div like ………querySelectorAll(".images img"); You have to put unique class name for parent so it will select only those images which are inside parent.
Yes you're right…To solve this first select the parent div like ………querySelectorAll(".images img"); You have to put unique class name for parent so it will select only those images which are inside parent.
what if you have other images in the website? The query selector gets also them and joins them in the slideshow effect.
what if you have other images in the website? the query selector also gets them and makes them join in the slideshow effect.
Please recheck codes. You probably did mistake on image path or JavaScript codes.
Thank you!
i always have an empty display before first image and after last image
very nice