<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport content="width=device-width, initial-scale=1.0"> <title>Image Carousel</title> <style> .image-container { display: flex; overflow: hidden; } img { width 33.33%; transition: transform 05s ease-in-out; } </> </head> <body> <div class="image-container"> <img src="image1.jpg" alt="Image "> <img src="image2.jpg" altImage 2"> <img src="image3.jpg alt="Image 3"> div>
<script> const images = document.querySelectorAll('img'); currentIndex = 0;
setInterval(() => { images[currentIndex].style.transform = 'translateX(-33.33%)'; currentIndex =currentIndex 1) % images.length; images[currentIndex].style.transform = 'translateX(0)'; }, 2000); // image every 2 seconds
</script> </body> </html>
