Tech Slider - 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>Tech Slider</title> <style> body { font-family: 'Arial', sans-serif; background: #212121; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .slider-container { position: relative; width: 80%; max-width: 800px; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .slider { display: flex; transition: transform 0.5s ease-in-out; } .slide { min-width: 100%; transition: opacity 0.5s ease-in-out; position: relative; } .slide img { width: 100%; border-radius: 15px; } .slide .content { position: absolute; bottom: 20px; left: 20px; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 10px 20px; border-radius: 10px; font-size: 1.2em; display: flex; align-items: center; } .slide .content .icon { margin-right: 10px; } .slide .content .emoji { margin-left: 10px; font-size: 1.5em; } .navigation { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); } .navigation .prev, .navigation .next { background: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; border-radius: 50%; cursor: pointer; transition: background 0.3s; } .navigation .prev:hover, .navigation .next:hover { background: rgba(0, 0, 0, 0.8); } .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .dot { width: 10px; height: 10px; background: #ddd; margin: 0 5px; border-radius: 50%; cursor: pointer; transition: background 0.3s; } .dot.active { background: #333; } </style> </head> <body> <div class="slider-container"> <div class="slider"> <div class="slide"> <img src="p1.png" alt="Slide 1"> <div class="content"> <i class="icon">💻</i> AI Technology <span class="emoji">🤖</span> </div> </div> <div class="slide"> <img src="p1.png" alt="Slide 2"> <div class="content"> <i class="icon">📱</i> Mobile Tech <span class="emoji">📱</span> </div> </div> <div class="slide"> <img src="p1.png" alt="Slide 3"> <div class="content"> <i class="icon">🔧</i> Innovations <span class="emoji">💪</span> </div> </div> </div> <div class="navigation"> <div class="prev">❮</div> <div class="next">❯</div> </div> <div class="dots"> <div class="dot active"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <script> const slider = document.querySelector('.slider'); const slides = document.querySelectorAll('.slide'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); const dots = document.querySelectorAll('.dot'); let currentIndex = 0; function updateSlider() { slider.style.transform = `translateX(-${currentIndex * 100}%)`; dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentIndex); }); } function showNextSlide() { currentIndex = (currentIndex + 1) % slides.length; updateSlider(); } function showPrevSlide() { currentIndex = (currentIndex - 1 + slides.length) % slides.length; updateSlider(); } nextBtn.addEventListener('click', showNextSlide); prevBtn.addEventListener('click', showPrevSlide); dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentIndex = index; updateSlider(); }); }); setInterval(showNextSlide, 5000); </script> </body> </html>