/* disable text selection while clicking fast */ .no-select user-select: none; </style> </head> <body> <div class="slider-container"> <div class="hero-slider"> <!-- slides track --> <div class="slides-track" id="slidesTrack"> <!-- slide 1 - Mountain Adventure --> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=80');"> <div class="hero-content"> <span class="category"><i class="fas fa-mountain"></i> Adventure awaits</span> <h1>Explore the untamed wild</h1> <p>Discover breathtaking landscapes, hidden trails, and unforgettable moments. Your next journey begins where the road ends.</p> <div class="btn-group"> <a href="#" class="btn-primary"><i class="fas fa-compass"></i> Discover trips</a> <a href="#" class="btn-outline"><i class="fas fa-play-circle"></i> Watch story</a> </div> </div> </div> <!-- slide 2 - Future Tech --> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1600&q=80');"> <div class="hero-content"> <span class="category"><i class="fas fa-microchip"></i> Innovation hub</span> <h1>Next‑gen intelligence</h1> <p>AI-driven solutions that reshape industries. Experience the synergy of design, automation, and limitless potential.</p> <div class="btn-group"> <a href="#" class="btn-primary"><i class="fas fa-rocket"></i> Launch demo</a> <a href="#" class="btn-outline"><i class="fas fa-chart-line"></i> Learn more</a> </div> </div> </div> <!-- slide 3 - Urban Vibes --> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=80');"> <div class="hero-content"> <span class="category"><i class="fas fa-city"></i> City rhythm</span> <h1>Live the metropolitan pulse</h1> <p>From neon skylines to hidden cafes, urban energy fuels creativity. Explore exclusive city guides and culture.</p> <div class="btn-group"> <a href="#" class="btn-primary"><i class="fas fa-map-marked-alt"></i> Explore routes</a> <a href="#" class="btn-outline"><i class="fas fa-video"></i> Virtual tour</a> </div> </div> </div> <!-- slide 4 - Ocean Escape --> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=1600&q=80');"> <div class="hero-content"> <span class="category"><i class="fas fa-water"></i> Deep blue</span> <h1>Where horizons merge</h1> <p>Feel the sea breeze, uncover marine wonders, and unwind at exclusive coastal retreats designed for serenity.</p> <div class="btn-group"> <a href="#" class="btn-primary"><i class="fas fa-umbrella-beach"></i> Plan escape</a> <a href="#" class="btn-outline"><i class="fas fa-camera"></i> Photo stories</a> </div> </div> </div> </div>
<!-- dots container --> <div class="slider-dots" id="dotsContainer"></div> hero slider codepen
@keyframes fadeUp 0% opacity: 0; transform: translateY(35px); 100% opacity: 1; transform: translateY(0); /* disable text selection while clicking fast */