If you want to create an Automatic Background Image Slider then this tutorial is for you. Here I will tell you step-by-step how to create a Background Image Slider using HTML, CSS, and JavaScript.
Creating an image slider is very easy if you know basic HTML CSS js. Earlier I shared many more types of Automatic Image Sliders in this tutorial. Some designs are created only by HTML CSS and some designs are created by javascript or jQuery.
Automatic Background Image Slider
You can easily create this Automatic Background Image Slideshow with HTML, CSS, and simple javascript.
You can easily use it on your web page or the background of any project. Here I provide step by step tutorials, required source code, live demo everything.
See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.
Sometimes there is a need to provide a background image slider on the webpage. Usually, the sliders used in the background have the feature of automatically changing the image.
Here I have used javascript to automatically change the images. But before this, I have shared many more designs which are made only by HTML and CSS.
How to Create Background Image Slider Using HTML CSS
If you want to know and learn how to create an Automatic Background Image Slider. Then you follow this tutorial completely.
If you just want the source code then you can use the download button below the article. But I would request you to follow the step by step tutorial below.
1. Basic Structure of Background Image Slider
First I created a box on the web page using below HTML and CSS codes. I will add all the elements in that box. I have used width:80% and height: 400px for this Automatic Background Image Slider.
<div id="slider">
</div>*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background: rgb(72, 190, 208);
margin: 100px auto;
}
#slider{
margin:0 auto;
width:80%;
height: 400px;
overflow:hidden;
padding: 10px;
background: white;
}
2. Add the images in the Background Slider
Now I have added the required images in that box or image slider using the following HTML.
<div class="slides">
<img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" width="100%" />
</div>
<div class="slides">
<img src="https://images6.alphacoders.com/462/thumb-1920-462371.jpg" width="100%" />
</div>
<div class="slides">
<img src="https://wallpaperaccess.com/full/1154341.jpg" width="100%" />
</div>
<div class="slides">
<img src="https://wallpapercave.com/wp/wp2634222.jpg" width="100%" />
</div>
<div class="slides">
<img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg" width="100%" />
</div>Those images are designed by following css.
.slides{
overflow:hidden;
animation-name:fade;
animation-duration:1s;
display:none;
}
@keyframes fade{
from{
opacity:0.4;
}
to{
opacity:1;
}
}
img{
width:100%;
height: 350px;
}After adding the above images nothing is visible in the display. The first thing that comes to your mind is why this is happening. Actually I used display:none in the above css. As a result the images are completely hidden. We will implement this later with JavaScript.
3. Add highlighter to background image slider
Now we will create a few dots for each image which will basically act as highlighters. As many dots as there are images are used here. The dot will be highlighted on the image that is open.
<div id="dot">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>The dots in this Background Image Slider should be designed with the following CSS. By default, the background color of the dots will be #d3d3d3. When the dots are activated then background:black will be.
#dot{
margin:0 auto;
text-align:center;
}
.dot{
display:inline-block;
border-radius:50%;
background:#d3d3d3;
padding:8px;
margin:10px 5px;
}
.active{
background:black;
}
4. Enable Automatic Image Slider Using JavaScript
Above we have created the basic structure of this automatic background image slider. Now it’s time to implement it with JavaScript.
1. First we defined the constants for the slider and the dot. Because I can’t directly use any html element in javascript.
2. Then changeSlide() adds all the information to change the image.
3. First, using the “if” instruction, when the value of index is less than 0, the value of index will be slides.length-1. Using the second “if” command, when the value of index is greater than slides.length-1 then the value of index will be 0.
4. Then using the for loop, I have instructed that in the case of i=0, display = “none” means that the images will not be visible.
5. Here I set the image change time using setTimeout. Here 2000 milliseconds are used i.e. every image will take 2 seconds to change.
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();
Automatic Background Image Slider’s image change has been made smoother by using bellow CSS. Also made the image slider responsive using @media.
@media (max-width:567px){
#slider{
width:100%;
}
}
Hopefully, from the above tutorial, you have completely learned how to create this project (How to Create Background Image Slider Using HTML CSS). Earlier I shared another method to create automatic multiple image slider.
Please comment on how you like this javascript Background Image Slider. Below you will find the source code needed to create this image slider.