Professional 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>Professional 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: 80%; max-width: 800px; overflow: hidden; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .carousel-slide { display: flex; transition: transform 0.5s ease-in-out; } .carousel-item { min-width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: white; position: relative; } .carousel-item:nth-child(1) { background: linear-gradient(45deg, #ff6b6b, #f06595); } .carousel-item:nth-child(2) { background: linear-gradient(45deg, #1e90ff, #00bfff); } .carousel-item:nth-child(3) { background: linear-gradient(45deg, #ff7f50, #ff6347); } .carousel-item:nth-child(4) { background: linear-gradient(45deg, #32cd32, #3cb371); } .carousel-item img { width: 50px; height: 50px; margin-right: 10px; } .carousel-icons { position: absolute; bottom: 10px; 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"> Slide 1 </div> <div class="carousel-item"> Slide 2 </div> <div class="carousel-item"> Slide 3 </div> <div class="carousel-item"> 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 slide = document.querySelector('.carousel-slide'); const slides = document.querySelectorAll('.carousel-item'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const icons = document.querySelectorAll('.carousel-icon'); let counter = 0; const size = slides[0].clientWidth; const updateCarousel = () => { slide.style.transform = 'translateX(' + (-size * counter) + 'px)'; icons.forEach((icon, index) => { icon.classList.toggle('active', index === counter); }); }; nextBtn.addEventListener('click', () => { counter = (counter + 1) % slides.length; updateCarousel(); }); prevBtn.addEventListener('click', () => { counter = (counter - 1 + slides.length) % slides.length; updateCarousel(); }); icons.forEach((icon, index) => { icon.addEventListener('click', () => { counter = index; updateCarousel(); }); }); updateCarousel(); </script> </body> </html>