Elegant Fade Carousel - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elegant Fade Carousel</title> <style> body { font-family: 'Arial', sans-serif; background: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .carousel-container { position: relative; width: 90%; max-width: 800px; overflow: hidden; border-radius: 15px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .carousel-slide { display: flex; transition: opacity 0.5s ease-in-out; position: relative; } .carousel-item { min-width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: white; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } .carousel-item.active { opacity: 1; position: relative; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; } .carousel-icons { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; } .carousel-icon { width: 15px; height: 15px; margin: 0 5px; background: white; border-radius: 50%; cursor: pointer; transition: background 0.3s; } .carousel-icon.active { background: #333; } .carousel-controls { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); } .carousel-control { background: rgba(0,0,0,0.5); border: none; color: white; padding: 10px; cursor: pointer; font-size: 1.5rem; transition: background 0.3s; } .carousel-control:hover { background: rgba(0,0,0,0.8); } </style> </head> <body> <div class="carousel-container"> <div class="carousel-slide"> <div class="carousel-item active"> <img src="pics/p1.png" alt="Fade Slide 1"> </div> <div class="carousel-item"> <img src="pics/p2.png" alt="Fade Slide 2"> </div> <div class="carousel-item"> <img src="pics/p3.png" alt="Fade Slide 3"> </div> <div class="carousel-item"> <img src="pics/p4.png" alt="Fade Slide 4"> </div> </div> <div class="carousel-icons"> <div class="carousel-icon active"></div> <div class="carousel-icon"></div> <div class="carousel-icon"></div> <div class="carousel-icon"></div> </div> <div class="carousel-controls"> <button type="button" class="carousel-control" id="prevBtn">❮</button> <button type="button" class="carousel-control" id="nextBtn">❯</button> </div> </div> <script> const items = document.querySelectorAll('.carousel-item'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const icons = document.querySelectorAll('.carousel-icon'); let counter = 0; const updateCarousel = () => { items.forEach((item, index) => { item.classList.toggle('active', index === counter); }); icons.forEach((icon, index) => { icon.classList.toggle('active', index === counter); }); }; nextBtn.addEventListener('click', () => { counter = (counter + 1) % items.length; updateCarousel(); }); prevBtn.addEventListener('click', () => { counter = (counter - 1 + items.length) % items.length; updateCarousel(); }); icons.forEach((icon, index) => { icon.addEventListener('click', () => { counter = index; updateCarousel(); }); }); updateCarousel(); </script> </body> </html>