Responsive Slider
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beautiful Responsive Slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="slider-container"> <div class="slider"> <div class="slide active"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Nature"> <div class="slide-content"> <h2>Beautiful Nature</h2> <p>Discover the wonders of the natural world</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Mountain"> <div class="slide-content"> <h2>Majestic Mountains</h2> <p>Explore the highest peaks on Earth</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Ocean"> <div class="slide-content"> <h2>Vast Oceans</h2> <p>Dive into the deep blue sea</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Forest"> <div class="slide-content"> <h2>Enchanted Forests</h2> <p>Walk through magical woodland</p> </div> </div> </div> <button class="slider-btn prev-btn"><i class="fas fa-chevron-left"></i></button> <button class="slider-btn next-btn"><i class="fas fa-chevron-right"></i></button> <div class="slider-dots"></div> </div> <script src="script.js"></script> </body> </html>
CSS
/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f5f5; } /* Slider container */ .slider-container { position: relative; max-width: 1200px; margin: 50px auto; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } /* Slider */ .slider { display: flex; height: 500px; transition: transform 0.5s ease-in-out; } /* Slide */ .slide { min-width: 100%; position: relative; } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .slide-content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; padding: 30px; padding-top: 60px; transform: translateY(100%); opacity: 0; transition: all 0.5s ease; } .slide.active .slide-content { transform: translateY(0); opacity: 1; } .slide-content h2 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } .slide-content p { font-size: 1.2rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } /* Navigation buttons */ .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.3); color: white; border: none; padding: 15px; font-size: 1.5rem; cursor: pointer; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10; } .slider-btn:hover { background: rgba(255, 255, 255, 0.5); } .prev-btn { left: 20px; } .next-btn { right: 20px; } /* Dots navigation */ .slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .slider-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .slider-dots .dot.active { background: white; transform: scale(1.2); } /* Responsive styles */ @media (max-width: 768px) { .slider-container { margin: 20px auto; border-radius: 0; } .slider { height: 400px; } .slide-content { padding: 20px; padding-top: 40px; } .slide-content h2 { font-size: 1.8rem; } .slide-content p { font-size: 1rem; } .slider-btn { width: 40px; height: 40px; font-size: 1.2rem; } } @media (max-width: 480px) { .slider { height: 300px; } .slide-content h2 { font-size: 1.5rem; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { const slider = document.querySelector('.slider'); const slides = document.querySelectorAll('.slide'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const dotsContainer = document.querySelector('.slider-dots'); let currentSlide = 0; const slideCount = slides.length; // Create dots slides.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => goToSlide(index)); dotsContainer.appendChild(dot); }); const dots = document.querySelectorAll('.dot'); // Next slide function function nextSlide() { currentSlide = (currentSlide + 1) % slideCount; updateSlider(); } // Previous slide function function prevSlide() { currentSlide = (currentSlide - 1 + slideCount) % slideCount; updateSlider(); } // Go to specific slide function goToSlide(index) { currentSlide = index; updateSlider(); } // Update slider function updateSlider() { slider.style.transform = `translateX(-${currentSlide * 100}%)`; // Update active slide slides.forEach((slide, index) => { slide.classList.toggle('active', index === currentSlide); }); // Update dots dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentSlide); }); } // Event listeners nextBtn.addEventListener('click', nextSlide); prevBtn.addEventListener('click', prevSlide); // Auto slide let slideInterval = setInterval(nextSlide, 5000); // Pause on hover slider.addEventListener('mouseenter', () => { clearInterval(slideInterval); }); slider.addEventListener('mouseleave', () => { slideInterval = setInterval(nextSlide, 5000); }); // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') nextSlide(); if (e.key === 'ArrowLeft') prevSlide(); }); // Touch events for mobile let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, {passive: true}); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, {passive: true}); function handleSwipe() { if (touchEndX < touchStartX - 50) nextSlide(); if (touchEndX > touchStartX + 50) prevSlide(); } });
Output Preview
Desktop
Mobile
Fullscreen
