Cinematic Luxury Travel Slider | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cinematic Luxury Travel Slider</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
    
  
</head>
<body>

<div class="hero-slider">
        
        
        <div class="slide active">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2000&auto=format&fit=crop');"></div>
            <div class="overlay"></div>
            <div class="content">
                <div class="subtitle">Experience the Extraordinary</div>
                <h1 class="headline">Swiss <i>Elegance</i></h1>
                <p class="description">Immerse yourself in the breathtaking majesty of the Alps. Discover untouched landscapes, pure air, and unparalleled luxury at the top of the world.</p>
                <a href="#" class="btn">Book Now</a>
            </div>
        </div>

<div class="slide">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1516815231560-8f41ec531527?q=80&w=2000&auto=format&fit=crop');"></div>
            <div class="overlay"></div>
            <div class="content">
                <div class="subtitle">Private Island Retreat</div>
                <h1 class="headline">Maldives <i>Escape</i></h1>
                <p class="description">Surrender to the rhythm of the ocean. Step into your private overwater sanctuary surrounded by endless turquoise waters and pure tranquility.</p>
                <a href="#" class="btn">Book Now</a>
            </div>
        </div>

<div class="slide">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?q=80&w=2000&auto=format&fit=crop');"></div>
            <div class="overlay"></div>
            <div class="content">
                <div class="subtitle">Timeless Heritage</div>
                <h1 class="headline">Kyoto <i>Serenity</i></h1>
                <p class="description">Wander through ancient bamboo groves and historic temples. Experience the delicate balance of ancient tradition and modern luxury.</p>
                <a href="#" class="btn">Book Now</a>
            </div>
        </div>

<div class="slider-nav">
            <button class="nav-btn" id="prevBtn" aria-label="Previous Slide">
                <svg viewBox="0 0 24 24"><path d="M16 4L8 12L16 20" stroke-linecap="square" stroke-linejoin="miter"/></svg>
            </button>
            <button class="nav-btn" id="nextBtn" aria-label="Next Slide">
                <svg viewBox="0 0 24 24"><path d="M8 4L16 12L8 20" stroke-linecap="square" stroke-linejoin="miter"/></svg>
            </button>
        </div>

</div>

</body>
</html>

CSS

/* Base Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #000;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

/* Slider Container */
        .hero-slider {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #000;
        }

/* Individual Slide Setup */
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            /* Ultra smooth and slow cross-fade */
            transition: opacity 2s ease-in-out, visibility 2s ease-in-out;
            z-index: 1;
        }

.slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

/* Cinematic Ken Burns Background Zoom */
        .slide-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            /* Start slightly zoomed in */
            transform: scale(1.15);
            /* Very slow transition for the cinematic feel */
            transition: transform 12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

/* When slide is active, zoom out slowly to normal scale */
        .slide.active .slide-bg {
            transform: scale(1);
        }

/* Premium Soft Dark Gradient Overlay */
        .overlay {
            position: absolute;
            inset: 0;
            /* Left to Right and Bottom to Top gradients combined for perfect text readability */
            background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%),
                        linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 40%);
            z-index: 2;
        }

/* Slide Content Container */
        .content {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translateY(-50%);
            max-width: 800px;
            z-index: 3;
            color: #fff;
        }

/* Subtitle - Small, spaced out */
        .subtitle {
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-bottom: 20px;
            color: #d4af37; /* Subtle champagne gold */
        }

/* Headline - Large, elegant Serif */
        .headline {
            font-family: 'Playfair Display', serif;
            font-size: 6rem;
            line-height: 1.05;
            font-weight: 400;
            margin-bottom: 30px;
            letter-spacing: -1px;
        }

.headline i {
            font-style: italic;
            color: #ebebeb;
        }

/* Description - Clean, thin Sans-serif */
        .description {
            font-size: 1.15rem;
            font-weight: 300;
            line-height: 1.7;
            max-width: 550px;
            margin-bottom: 40px;
            color: rgba(255, 255, 255, 0.8);
        }

/* Minimalist CTA Button */
        .btn {
            display: inline-block;
            padding: 16px 45px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 3px;
            background: transparent;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
        }

.btn:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

/* =========================================
           SEQUENTIAL ANIMATION SETUP
           ========================================= */
        .subtitle, .headline, .description, .btn {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.2s cubic-bezier(0.215, 0.610, 0.355, 1), 
                        transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1);
        }

/* Trigger animations sequentially with delays */
        .slide.active .subtitle {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.8s;
        }

.slide.active .headline {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.1s;
        }

.slide.active .description {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.4s;
        }

.slide.active .btn {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.7s;
        }

/* =========================================
           THIN MINIMAL NAVIGATION
           ========================================= */
        .slider-nav {
            position: absolute;
            bottom: 50px;
            right: 10%;
            display: flex;
            gap: 20px;
            z-index: 10;
        }

.nav-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.5;
            transition: opacity 0.4s ease;
        }

.nav-btn:hover {
            opacity: 1;
        }

/* Extremely thin SVG strokes for high-end look */
        .nav-btn svg {
            width: 40px;
            height: 40px;
            stroke: #fff;
            stroke-width: 0.8; /* Thin line */
            fill: none;
        }

/* Responsive Design */
        @media (max-width: 992px) {
            .headline { font-size: 4.5rem; }
            .content { left: 5%; right: 5%; }
        }

@media (max-width: 768px) {
            .headline { font-size: 3.5rem; }
            .description { font-size: 1rem; }
            .slider-nav { bottom: 30px; right: 5%; }
            .nav-btn svg { width: 30px; height: 30px; }
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const slides = document.querySelectorAll('.slide');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            
            let currentIndex = 0;
            const slideDuration = 8000; // 8 Seconds per slide for a slow, relaxed feel
            let autoplayInterval;

function changeSlide(newIndex) {
                // Remove active from current
                slides[currentIndex].classList.remove('active');
                
                // Update Index
                currentIndex = newIndex;
                
                // Add active to new
                slides[currentIndex].classList.add('active');
            }

function nextSlide() {
                let nextIndex = (currentIndex === slides.length - 1) ? 0 : currentIndex + 1;
                changeSlide(nextIndex);
            }

function prevSlide() {
                let prevIndex = (currentIndex === 0) ? slides.length - 1 : currentIndex - 1;
                changeSlide(prevIndex);
            }

// Click Events
            nextBtn.addEventListener('click', () => {
                nextSlide();
                resetAutoplay();
            });

prevBtn.addEventListener('click', () => {
                prevSlide();
                resetAutoplay();
            });

// Autoplay Logic
            function startAutoplay() {
                autoplayInterval = setInterval(nextSlide, slideDuration);
            }

function resetAutoplay() {
                clearInterval(autoplayInterval);
                startAutoplay();
            }

// Initialize
            startAutoplay();
        });

Cinematic Luxury Travel Slider Preview

Download Options