<!
DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>3 Image Slideshow</title>
<style>
Body {
Display: flex;
Justify-content: center;
Align-items: center;
Height: 100vh;
Background: #f4f4f4;
Margin: 0;
.slideshow {
Position: relative;
Width: 600px;
Height: 350px;
Overflow: hidden;
Border-radius: 12px;
Box-shadow: 0 6px 20px rgba(0,0,0,0.3);
.slideshow img {
Position: absolute;
Width: 100%;
Height: 100%;
Object-fit: cover;
Opacity: 0;
Animation: fade 9s infinite;
.slideshow img:nth-child(1) {
Animation-delay: 0s;
.slideshow img:nth-child(2) {
Animation-delay: 3s;
.slideshow img:nth-child(3) {
Animation-delay: 6s;
@keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<div class=”slideshow”>
<img
src=https://uploads.onecompiler.io/43s29xa8e/43s2a32xy/1000005235.jpg
alt=”Image 1”>
<img
src=https://uploads.onecompiler.io/43s29xa8e/43s29xsug/1000005209.webp
alt=”Image 2”>
<img
src=https://uploads.onecompiler.io/43s29xa8e/43s2a32xy/1000005235.jpg
alt=”Image 3”>
</div>
</body>
</html>
