Animated Slideshow App in HTML CSS & JavaScript

Last Updated : 29 Jul, 2024

We will learn to create a slideshow of multiple images. This slideshow will transition between the images every few seconds. we will further learn to align the images, style the images, and make the animation look better.

Prerequisites

Approach

Create 3 files one for HTML, one for CSS, and one for JS in a single folder.
In HTML file, Add the below HTML code. In this code, we have two main tags one is Heading and the other is a Division with 6 images. Adding the CSS Stylesheet link and the script to the JS file which is created in the same folder. Also, add slide, and fade classes to every image div.
In CSS, we define the classes mentioned in the HTML class attributes. To create animation we have used a class called fade which creates a fading effect. Inside the fade class, we have an animation property with a duration of 2 seconds and triggered infinity. Using @keyframes we toggle the opacity of the slide between 0.4 to 1.0 and create fade effect.
In JS file, we have nextSlide( ) function that is invoked every 2 seconds using setInterval( ) and is used to call other function showSlide( ) in the same file. showSlide( ) iterates through every slide and toggles the display of the slide which matches with the passed index. The index is generated by taking the modulus between currentSlide (Starts with zero) number and 6 as there are 6 slides and this generates numbers in sequential order starting from 1.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>GFG</title>
	<link rel="stylesheet" href="style.css" />
</head>

<body>
	<h1>Slide Show</h1>
	<div class="slideshow-container">
		<div class="slide fade">
			<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231126110234/ezgifcom-gif-maker-1.webp"
				alt="Slide 1">
		</div>
		<div class="slide fade">
			<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231217134958/Group-23.png" alt="Slide 2">
		</div>
		<div class="slide fade">
			<img src=	 
"https://media.geeksforgeeks.org/wp-content/uploads/20240106180224/Screenshot-2024-01-06-174436.gif"
				alt="Slide 3">
		</div>
		<div class="slide fade">
			<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109190054/Screenshot-2024-01-09-185442.gif"
				alt="Slide 3">
		</div>
		<div class="slide fade">
			<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231123180952/Group-18.png" alt="Slide 3">
		</div>
		<div class="slide fade">
			<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231121180023/Group-17.png" alt="Slide 3">
		</div>
	</div>
	<script src="./script.js"></script>
</body>

</html>

CSS

body {
	padding-bottom: 20px;
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
}

h1 {
	font-size: 4vw;
}

.slideshow-container {
	width: 60%;
	aspect-ratio: 1;
	position: relative;
	margin: auto;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 2px 2px 5px
}

.slide {
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	justify-content: center;
	align-items: center;

}

img {
	width: 100%;
	height: 100%;
	object-fit: contains;
}

.fade {
	animation: fade 2s ease-in-out infinite;
}

@keyframes fade {
	from {
		opacity: 0.4;
	}

	to {
		opacity: 1;
	}
}

JavaScript

let currentSlide = 0;

function showSlide(index) {
	const slides = document.querySelectorAll('.slide');

	slides.forEach((slide, i) => {
		slide.style.display = i === index ? 'flex' : 'none';
	});
}

function nextSlide() {
	currentSlide = (currentSlide + 1) % 6;
	showSlide(currentSlide);
}

setInterval(nextSlide, 2000);