AquaShine Car Washing Hero 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>AquaShine Car Wash - Premium Automotive Care Services</title> </head> <body class="bg-blue-900 font-roboto overflow-x-hidden"> <!-- Car Wash Services Hero Slider --> <section class="relative h-screen"> <!-- Main Slider Container --> <div class="slider-container h-full"> <!-- Slide 1 - Express Wash --> <div class="slide active" id="slide-0"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&h=1080&fit=crop&crop=center" alt="Express Car Wash Service" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Express Car Wash Service image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float"> <div class="w-3 h-20 automotive-accent opacity-70"></div> </div> <div class="service-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-fadeInUp"> Express Wash </div> <h1 class="text-5xl md:text-7xl font-oswald font-bold mb-6 text-shadow-automotive animate-fadeInUp" style="animation-delay: 0.2s;"> Quick & Clean </h1> <p class="text-xl mb-8 text-shadow-automotive animate-fadeInUp opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Fast and efficient exterior wash service perfect for busy schedules. Get your car sparkling clean in just 15 minutes with our automated wash system. </p> <div class="flex flex-wrap gap-4 mb-8 animate-fadeInUp" style="animation-delay: 0.6s;"> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> 15 Minute Service </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Exterior Only </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Basic Dry </div> <div class="service-express px-4 py-2 rounded-full text-sm font-medium text-white"> Quick Service </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-fadeInUp" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Start Wash </button> <button class="btn-automotive px-8 py-4 rounded-full text-lg font-medium"> View Packages </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-oswald font-semibold mb-6 text-white">Express Package Details</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Pre-Rinse</span> <span class="font-semibold text-blue-300">Included</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Soap Application</span> <span class="font-semibold text-blue-300">Premium Foam</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Brush Wash</span> <span class="font-semibold text-blue-300">Soft Touch</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Final Rinse</span> <span class="font-semibold text-blue-300">Spot-Free</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Total Price</span> <span class="font-semibold text-blue-300">$12.99</span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Slide 2 - Premium Detail --> <div class="slide" id="slide-1"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9?w=1920&h=1080&fit=crop&crop=center" alt="Premium Car Detailing Service" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Premium Car Detailing Service image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float" style="animation-delay: 1s;"> <div class="w-3 h-20 automotive-accent opacity-70"></div> </div> <div class="service-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-slideInLeft"> Premium Detail </div> <h1 class="text-5xl md:text-7xl font-oswald font-bold mb-6 text-shadow-automotive animate-slideInLeft" style="animation-delay: 0.2s;"> Complete Care </h1> <p class="text-xl mb-8 text-shadow-automotive animate-slideInLeft opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Comprehensive interior and exterior detailing service. Professional-grade products and techniques for showroom-quality results that protect your investment. </p> <div class="flex flex-wrap gap-4 mb-8 animate-slideInLeft" style="animation-delay: 0.6s;"> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> 90 Minute Service </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Interior & Exterior </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Wax Protection </div> <div class="service-premium px-4 py-2 rounded-full text-sm font-medium text-white"> Premium Service </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-slideInLeft" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Book Detail </button> <button class="btn-automotive px-8 py-4 rounded-full text-lg font-medium"> Service Details </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-oswald font-semibold mb-6 text-white">Premium Services</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Hand Wash & Dry</span> <span class="font-semibold text-blue-300">Microfiber</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Interior Vacuum</span> <span class="font-semibold text-blue-300">Deep Clean</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Leather Treatment</span> <span class="font-semibold text-blue-300">Conditioning</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Tire Shine</span> <span class="font-semibold text-blue-300">Premium Gloss</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Total Price</span> <span class="font-semibold text-blue-300">$49.99</span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Slide 3 - Full Service Wash --> <div class="slide" id="slide-2"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?w=1920&h=1080&fit=crop&crop=center" alt="Full Service Car Wash" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Full Service Car Wash image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float" style="animation-delay: 2s;"> <div class="w-3 h-20 automotive-accent opacity-70"></div> </div> <div class="service-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-fadeInUp"> Full Service Wash </div> <h1 class="text-5xl md:text-7xl font-oswald font-bold mb-6 text-shadow-automotive animate-fadeInUp" style="animation-delay: 0.2s;"> Complete Package </h1> <p class="text-xl mb-8 text-shadow-automotive animate-fadeInUp opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Our most comprehensive car care service combining thorough cleaning, protection, and detailing for the ultimate automotive care experience. </p> <div class="flex flex-wrap gap-4 mb-8 animate-fadeInUp" style="animation-delay: 0.6s;"> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> 60 Minute Service </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Complete Package </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Protection Coating </div> <div class="service-full px-4 py-2 rounded-full text-sm font-medium text-white"> Full Service </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-fadeInUp" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Choose Full Service </button> <button class="btn-automotive px-8 py-4 rounded-full text-lg font-medium"> Package Comparison </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-oswald font-semibold mb-6 text-white">Full Service Includes </h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Exterior Wash & Wax</span> <span class="font-semibold text-blue-300">Premium</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Interior Detail</span> <span class="font-semibold text-blue-300">Complete</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Window Cleaning</span> <span class="font-semibold text-blue-300">Inside & Out</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Dashboard Treatment</span> <span class="font-semibold text-blue-300">UV Protection</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Total Price</span> <span class="font-semibold text-blue-300">$34.99</span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Slide 4 - Mobile Car Wash --> <div class="slide" id="slide-3"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1544829099-b9a0c5303bea?w=1920&h=1080&fit=crop&crop=center" alt="Mobile Car Wash Service" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Mobile Car Wash Service image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float" style="animation-delay: 3s;"> <div class="w-3 h-20 automotive-accent opacity-70"></div> </div> <div class="service-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-slideInLeft"> Mobile Car Wash </div> <h1 class="text-5xl md:text-7xl font-oswald font-bold mb-6 text-shadow-automotive animate-slideInLeft" style="animation-delay: 0.2s;"> We Come To You </h1> <p class="text-xl mb-8 text-shadow-automotive animate-slideInLeft opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Convenient on-site car washing service at your home or office. Professional equipment and eco-friendly products delivered to your location. </p> <div class="flex flex-wrap gap-4 mb-8 animate-slideInLeft" style="animation-delay: 0.6s;"> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> On-Site Service </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Eco-Friendly </div> <div class="service-badge px-4 py-2 rounded-full text-sm font-medium"> Professional Equipment </div> <div class="service-mobile px-4 py-2 rounded-full text-sm font-medium text-white"> Mobile Service </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-slideInLeft" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Schedule Mobile </button> <button class="btn-automotive px-8 py-4 rounded-full text-lg font-medium"> Service Areas </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-oswald font-semibold mb-6 text-white">Mobile Service Options</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Basic Mobile Wash</span> <span class="font-semibold text-blue-300">$25.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Premium Mobile Detail</span> <span class="font-semibold text-blue-300">$65.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Fleet Service</span> <span class="font-semibold text-blue-300">Custom Quote</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Service Radius</span> <span class="font-semibold text-blue-300">25 Miles</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Booking Notice</span> <span class="font-semibold text-blue-300">24 Hours</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Navigation Arrows --> <button class="absolute left-8 top-1/2 transform -translate-y-1/2 z-20 glass-effect w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl hover:bg-white/20 transition-all duration-500 font-bold" id="prevBtn"> ‹ </button> <button class="absolute right-8 top-1/2 transform -translate-y-1/2 z-20 glass-effect w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl hover:bg-white/20 transition-all duration-500 font-bold" id="nextBtn"> › </button> <!-- Slide Indicators --> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 flex space-x-4"> <button class="indicator w-3 h-3 rounded-full bg-blue-500 transition-all duration-500 active shadow-lg" data-slide="0"></button> <button class="indicator w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-500 shadow-lg" data-slide="1"></button> <button class="indicator w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-500 shadow-lg" data-slide="2"></button> <button class="indicator w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-500 shadow-lg" data-slide="3"></button> </div> <!-- Car Wash Stats --> <div class="absolute top-8 right-8 z-20 space-y-4 hidden lg:block"> <div class="glass-effect-dark p-4 rounded-2xl text-white text-center animate-fadeInUp" style="animation-delay: 1.2s;"> <!-- Car Wash Branding --> <div class=" glass-effect-dark p-6 rounded-2xl text-white animate-fadeInUp"> <h2 class="text-2xl font-oswald font-bold mb-2">AquaShine Car Wash</h2> <p class="text-sm opacity-80 mb-1">Premium Automotive Care Since 2010</p> <p class="text-sm opacity-60">Licensed • Insured • Eco-Friendly</p> <p class="text-sm opacity-60 mt-1">Call: (555) WASH-CAR</p> </div> </div> </div> <!-- Progress Bar --> <div class="absolute bottom-0 left-0 w-full h-1 bg-white/10 z-20"> <div class="h-full automotive-accent transition-all duration-1000 ease-out" id="progressBar" style="width: 25%;"></div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&family=Oswald:wght@300;400;500;600;700&display=swap'); .font-roboto { font-family: 'Roboto', sans-serif; } .font-oswald { font-family: 'Oswald', sans-serif; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: translateX(0); } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-30px) rotate(2deg); } } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } .animate-fadeInUp { animation: fadeInUp 1.2s ease-out forwards; } .animate-slideInLeft { animation: slideInLeft 1.2s ease-out forwards; } .animate-slideInRight { animation: slideInRight 1.2s ease-out forwards; } .animate-float { animation: float 8s ease-in-out infinite; } .animate-pulse-slow { animation: pulse 4s ease-in-out infinite; } .slider-container { position: relative; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale(1.05); } .slide.active { opacity: 1; transform: scale(1); } .slide.next { transform: translateX(100%) scale(1.05); } .slide.prev { transform: translateX(-100%) scale(1.05); } .overlay-gradient { background: linear-gradient(135deg, rgba(30, 64, 175, 0.85) 0%, rgba(30, 64, 175, 0.4) 30%, rgba(30, 64, 175, 0.2) 50%, rgba(30, 64, 175, 0.5) 70%, rgba(30, 64, 175, 0.9) 100%); } .text-shadow-automotive { text-shadow: 0 4px 20px rgba(30, 64, 175, 0.7), 0 8px 40px rgba(30, 64, 175, 0.5); } .glass-effect { backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.3); } .glass-effect-dark { backdrop-filter: blur(25px); background: rgba(30, 64, 175, 0.35); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.45); } .btn-automotive { background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.35); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn-automotive:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(30, 64, 175, 0.45); } .btn-primary { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.4); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn-primary:hover { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(30, 64, 175, 0.6); } .service-tag { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: #fff; font-weight: 600; } .service-badge { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); } .automotive-accent { background: linear-gradient(90deg, #1e40af 0%, #3b82f6 50%, #1e40af 100%); } .service-express { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .service-premium { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .service-full { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); } .service-mobile { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
JavaScript
// Slider functionality let currentSlide = 0; const totalSlides = 4; const slides = document.querySelectorAll('.slide'); const indicators = document.querySelectorAll('.indicator'); const progressBar = document.getElementById('progressBar'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); function updateSlider() { // Update slides slides.forEach((slide, index) => { slide.classList.remove('active', 'next', 'prev'); if (index === currentSlide) { slide.classList.add('active'); } else if (index === (currentSlide + 1) % totalSlides) { slide.classList.add('next'); } else if (index === (currentSlide - 1 + totalSlides) % totalSlides) { slide.classList.add('prev'); } }); // Update indicators indicators.forEach((indicator, index) => { indicator.classList.toggle('active', index === currentSlide); if (index === currentSlide) { indicator.classList.remove('bg-white/40'); indicator.classList.add('bg-blue-500'); } else { indicator.classList.remove('bg-blue-500'); indicator.classList.add('bg-white/40'); } }); // Update progress bar const progress = ((currentSlide + 1) / totalSlides) * 100; progressBar.style.width = `${progress}%`; } function nextSlide() { currentSlide = (currentSlide + 1) % totalSlides; updateSlider(); } function prevSlide() { currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; updateSlider(); } // Auto-advance slides every 8 seconds let autoSlideInterval = setInterval(nextSlide, 8000); // Navigation event listeners nextBtn.addEventListener('click', () => { clearInterval(autoSlideInterval); nextSlide(); autoSlideInterval = setInterval(nextSlide, 8000); }); prevBtn.addEventListener('click', () => { clearInterval(autoSlideInterval); prevSlide(); autoSlideInterval = setInterval(nextSlide, 8000); }); // Indicator event listeners indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { clearInterval(autoSlideInterval); currentSlide = index; updateSlider(); autoSlideInterval = setInterval(nextSlide, 8000); }); }); // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { clearInterval(autoSlideInterval); prevSlide(); autoSlideInterval = setInterval(nextSlide, 8000); } else if (e.key === 'ArrowRight') { clearInterval(autoSlideInterval); nextSlide(); autoSlideInterval = setInterval(nextSlide, 8000); } }); // Touch/swipe support for mobile let touchStartX = 0; let touchEndX = 0; document.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }); document.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { const swipeThreshold = 50; const diff = touchStartX - touchEndX; if (Math.abs(diff) > swipeThreshold) { clearInterval(autoSlideInterval); if (diff > 0) { nextSlide(); } else { prevSlide(); } autoSlideInterval = setInterval(nextSlide, 8000); } } // Button click handlers document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Start') || button.textContent.includes('Book') || button.textContent.includes('Choose') || button.textContent.includes('Schedule')) { button.addEventListener('click', () => { showNotification('Opening booking system...'); }); } if (button.textContent.includes('View') || button.textContent.includes('Service') || button.textContent.includes('Package') || button.textContent.includes('Areas') || button.textContent.includes('Comparison')) { button.addEventListener('click', () => { showNotification('Loading service information...'); }); } }); // Automotive notification system function showNotification(message) { const notification = document.createElement('div'); notification.className = 'fixed top-8 left-1/2 transform -translate-x-1/2 glass-effect-dark text-white px-8 py-4 rounded-full shadow-2xl z-50 transition-all duration-700 translate-y-[-100px] opacity-0 font-medium'; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.classList.remove('translate-y-[-100px]', 'opacity-0'); notification.classList.add('translate-y-0', 'opacity-100'); }, 100); setTimeout(() => { notification.classList.add('translate-y-[-100px]', 'opacity-0'); setTimeout(() => { document.body.removeChild(notification); }, 700); }, 3500); } // Pause auto-slide on hover const sliderContainer = document.querySelector('.slider-container'); sliderContainer.addEventListener('mouseenter', () => { clearInterval(autoSlideInterval); }); sliderContainer.addEventListener('mouseleave', () => { autoSlideInterval = setInterval(nextSlide, 8000); }); // Initialize slider updateSlider();
Output Preview
Desktop
Mobile
Fullscreen