In this blog, we will look at automatic Image Sliders using HTML, CSS, & Javascript. The below code will display a series of images and automatically transitions between them at a set interval. Let’s go through the code in detail:
HTML Code:
In this blog, we will look at automatic Image Sliders using HTML, CSS, & Javascript. The below code will display a series of images and automatically transitions between them at a set interval. Let’s go through the code in detail:
HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <title>Automatic Image SLider</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
This is the basic HTML structure of a web page, including the head section where meta information about the page is specified.
CSS:
<style>
.slider {
position: relative;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
</style>
This is the CSS code that defines the style for the slider. The .slider class sets the position of the container element to relative, specifies the height to 400px, and hides any overflow of the container.
The .slider img class sets the position of the images to absolute and specifies that they should fill the entire width and height of the slider.
It also sets the initial opacity of the images to 0, and defines a transition effect for when the opacity changes. The .slider img.active class sets the opacity of the active image to 1.
</head>
<body>
<div class="slider">
<img src="img/image1.jpg" alt="Image 1">
<img src="img/image2.jpg" alt="Image 2">
<img src="img/image3.jpg" alt="Image 3">
</div>
This is the HTML code that creates the slider. It consists of a div element with a class of slider, which contains three img elements with the source of the images and their alt text.
Javascript:
<script>
const images = document.querySelectorAll(".slider img");
let current = 0;
function showImage() {
for (let i = 0; i < images.length; i++) {
images[i].classList.remove("active");
}
images[current].classList.add("active");
current++;
if (current === images.length) {
current = 0;
}
}
showImage();
setInterval(showImage, 3000);
</script>
The code starts by selecting all the elements within an HTML document that have the class “slider”. These images are stored in a variable called images.
Next, a variable called current is initialized with a value of 0. This variable will keep track of the current image being displayed by the slider.
The showImage() function is defined, which is responsible for updating the display of the slider.
The function starts by looping through all the images and removing the “active” class from them, which hides the images from view.
Then, it adds the “active” class to the current image, which displays it on the webpage. It then increments the current variable by 1, so that the next image will be displayed on the next iteration of the function.
If the current variable is equal to the total number of images, it resets back to 0, so that the slider starts over from the beginning.
Finally, the showImage() function is called once to display the first image, and then the setInterval() function is used to repeatedly call the showImage() function every 3000 milliseconds (or 3 seconds), which will cycle through the images in the slider automatically.
Overall, this code provides a simple and effective way to create an image slider using JavaScript.
Automatic Image Slider Using HTML, CSS & Javascript
Below is the complete working code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Automatic Image Slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slider {
position: relative;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<img src="img/image1.jpg" alt="Image 1">
<img src="img/image2.jpg" alt="Image 2">
<img src="img/image3.jpg" alt="Image 3">
</div>
<script>
const images = document.querySelectorAll(".slider img");
let current = 0;
function showImage() {
for (let i = 0; i < images.length; i++) {
images[i].classList.remove("active");
}
images[current].classList.add("active");
current++;
if (current === images.length) {
current = 0;
}
}
showImage();
setInterval(showImage, 3000);
</script>
</body>
</html>