Travel Collection Slider Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ÉLÉGANCE | Luxury Travel Collection</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="bg-pattern"></div>
    
    <div class="header">
        <div class="brand">
            <div class="brand-icon">
                <i class="fas fa-crown"></i>
            </div>
            <div class="brand-name">ÉLÉGANCE</div>
        </div>
        <p>Curated collection of luxury travel experiences designed for the discerning traveler. Each destination offers unparalleled beauty, privacy, and world-class hospitality.</p>
    </div>
    
    <div class="slider-container">
        <button class="slider-arrow slider-arrow-left" id="prevBtn">
            <i class="fas fa-chevron-left"></i>
        </button>
        
        <div class="slider" id="slider">
            
        </div>
        
        <button class="slider-arrow slider-arrow-right" id="nextBtn">
            <i class="fas fa-chevron-right"></i>
        </button>
        
        <div class="slider-progress">
            <div class="slider-progress-bar" id="progressBar"></div>
        </div>
        
        <div class="slider-counter">
            <span id="currentSlide">1</span> / <span id="totalSlides">7</span>
        </div>
    </div>
    
    <div class="footer">
        <p>© 2023 ÉLÉGANCE TRAVEL GROUP | ALL RIGHTS RESERVED | BY APPOINTMENT ONLY</p>
    </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --gold: #d4af37;
            --gold-light: #f4e8c1;
            --dark-bg: #0a0f1c;
            --dark-card: #12192d;
            --text-light: #f8f8f8;
            --text-gray: #a0a7b8;
            --transition-slow: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
            --transition-medium: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        body {
            background-color: var(--dark-bg);
            color: var(--text-light);
            min-height: 100vh;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            position: relative;
        }
        
        /* Background pattern */
        .bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 20%),
                radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.03) 0%, transparent 20%),
                radial-gradient(circle at 40% 40%, rgba(10, 15, 28, 0.9) 0%, transparent 50%);
            z-index: -1;
        }
        
        /* Header */
        .header {
            padding: 60px 40px 40px;
            text-align: center;
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .brand-icon {
            font-size: 24px;
            color: var(--gold);
        }
        
        .brand-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.8rem;
            font-weight: 500;
            letter-spacing: 8px;
            text-transform: uppercase;
            color: var(--gold);
            position: relative;
        }
        
        .brand-name::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }
        
        .header h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3.5rem;
            font-weight: 300;
            margin-bottom: 20px;
            line-height: 1.2;
            letter-spacing: 1px;
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto 40px;
            line-height: 1.7;
            color: var(--text-gray);
            font-weight: 300;
        }
        
        /* Slider container */
        .slider-container {
            position: relative;
            padding: 40px 0 80px;
            max-width: 1600px;
            margin: 0 auto;
        }
        
        /* Premium navigation arrows */
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(18, 25, 45, 0.7);
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: var(--gold-light);
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-medium);
            z-index: 10;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .slider-arrow:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--gold);
            transform: translateY(-50%) scale(1.05);
        }
        
        .slider-arrow-left {
            left: 40px;
        }
        
        .slider-arrow-right {
            right: 40px;
        }
        
        .slider-arrow i {
            transition: transform 0.3s ease;
        }
        
        .slider-arrow:hover i {
            transform: scale(1.1);
        }
        
        /* Slider */
        .slider {
            display: flex;
            gap: 30px;
            padding: 20px 40px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-snap-type: x mandatory;
        }
        
        .slider::-webkit-scrollbar {
            display: none;
        }
        
        /* Travel card */
        .travel-card {
            flex: 0 0 420px;
            height: 580px;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            scroll-snap-align: center;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
            transition: var(--transition-slow);
            cursor: pointer;
        }
        
        .travel-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.9) 90%);
            z-index: 1;
            transition: var(--transition-slow);
        }
        
        .travel-card:hover {
            transform: translateY(-20px) scale(1.02);
        }
        
        .travel-card:hover::before {
            background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.95) 80%);
        }
        
        /* Card image with parallax effect */
        .card-image-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 12s cubic-bezier(0.2, 0.8, 0.4, 1);
            will-change: transform;
        }
        
        .travel-card:hover .card-image {
            transform: scale(1.12);
        }
        
        /* Card content */
        .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 40px;
            z-index: 2;
            transform: translateY(10px);
            transition: var(--transition-slow);
        }
        
        .travel-card:hover .card-content {
            transform: translateY(0);
        }
        
        .card-badge {
            display: inline-block;
            background: rgba(212, 175, 55, 0.15);
            color: var(--gold-light);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            letter-spacing: 1.5px;
            margin-bottom: 20px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        
        .card-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.6rem;
            font-weight: 500;
            line-height: 1.1;
            margin-bottom: 15px;
            letter-spacing: 0.5px;
        }
        
        .card-description {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-gray);
            margin-bottom: 30px;
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition: height 0.8s ease, opacity 0.8s ease 0.2s;
        }
        
        .travel-card:hover .card-description {
            height: 80px;
            opacity: 1;
        }
        
        .card-features {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.6s ease 0.3s;
        }
        
        .travel-card:hover .card-features {
            opacity: 1;
            transform: translateY(0);
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: var(--text-gray);
        }
        
        .feature i {
            color: var(--gold);
            font-size: 0.9rem;
        }
        
        /* CTA Button */
        .card-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: transparent;
            border: 1px solid rgba(212, 175, 55, 0.4);
            color: var(--gold-light);
            padding: 18px 30px;
            width: 100%;
            font-size: 1rem;
            letter-spacing: 1.5px;
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition-medium);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            overflow: hidden;
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease 0.4s;
        }
        
        .travel-card:hover .card-button {
            opacity: 1;
            transform: translateY(0);
        }
        
        .card-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
            transition: left 0.7s ease;
        }
        
        .card-button:hover::before {
            left: 100%;
        }
        
        .card-button:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--gold);
            transform: scale(1.02);
        }
        
        .button-text {
            font-weight: 500;
        }
        
        .button-icon {
            font-size: 1.2rem;
            transition: transform 0.4s ease;
        }
        
        .card-button:hover .button-icon {
            transform: translateX(5px);
        }
        
        /* Progress indicator */
        .slider-progress {
            width: 300px;
            height: 2px;
            background: rgba(255, 255, 255, 0.1);
            margin: 40px auto 20px;
            position: relative;
            border-radius: 2px;
        }
        
        .slider-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: calc(100% / 7);
            background: linear-gradient(90deg, var(--gold), #f4e8c1);
            border-radius: 2px;
            transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        
        /* Counter */
        .slider-counter {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-gray);
            letter-spacing: 1px;
            margin-top: 10px;
        }
        
        /* Footer */
        .footer {
            text-align: center;
            padding: 40px 20px;
            font-size: 0.85rem;
            color: var(--text-gray);
            letter-spacing: 1px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Responsive design */
        @media (max-width: 1200px) {
            .travel-card {
                flex: 0 0 380px;
                height: 540px;
            }
            
            .slider-arrow {
                width: 60px;
                height: 60px;
            }
            
            .slider-arrow-left {
                left: 20px;
            }
            
            .slider-arrow-right {
                right: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .header {
                padding: 40px 20px 30px;
            }
            
            .brand-name {
                font-size: 2.2rem;
                letter-spacing: 5px;
            }
            
            .header h1 {
                font-size: 2.5rem;
            }
            
            .travel-card {
                flex: 0 0 320px;
                height: 480px;
            }
            
            .card-content {
                padding: 30px;
            }
            
            .card-title {
                font-size: 2.2rem;
            }
            
            .slider-arrow {
                display: none;
            }
            
            .slider {
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .travel-card {
                flex: 0 0 280px;
                height: 440px;
            }
            
            .card-content {
                padding: 20px;
            }
            
            .card-title {
                font-size: 1.8rem;
            }
            
            .card-button {
                padding: 14px 20px;
                font-size: 0.9rem;
            }
        }

JavaScript

// Enhanced luxury travel destinations data
        const destinations = [
            {
                id: 1,
                name: "Santorini, Greece",
                description: "Experience breathtaking sunsets over white-washed cliffside villas with private infinity pools overlooking the Aegean Sea.",
                image: "https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=90",
                cta: "Explore Exclusive Villas",
                badge: "Most Popular",
                features: ["Private Villa", "Infinity Pool", "Wine Tasting", ]
            },
            {
                id: 2,
                name: "Bora Bora",
                description: "Overwater bungalows with glass floors and direct lagoon access in the heart of French Polynesia.",
                image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=90",
                cta: "Book Private Island",
                badge: "Limited Availability",
                features: ["Overwater Bungalow", "Private Chef", "Lagoon Access"]
            },
            {
                id: 3,
                name: "Swiss Alps",
                description: "Ski-in/ski-out luxury chalets with private thermal spas and panoramic mountain views.",
                image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=90",
                cta: "View Alpine Chalets",
                badge: "Winter Exclusive",
                features: ["Ski-in/Ski-out", "Private Spa", "Wine Cellar"]
            },
            {
                id: 4,
                name: "Kyoto, Japan",
                description: "Ancient ryokans with private onsen baths, kaiseki dining, and exclusive geisha performances.",
                image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=90",
                cta: "Discover Cultural Retreat",
                badge: "Cultural Immersion",
                features: ["Private Onsen", "Kaiseki Dining", "Tea Ceremony"]
            },
            {
                id: 5,
                name: "Amalfi Coast",
                description: "Clifftop villas with lemon groves, private boat access, and Michelin-star dining experiences.",
                image: "https://images.unsplash.com/photo-1533676802871-eca1ae998cd5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w-1470&q=90",
                cta: "Plan Coastal Journey",
                badge: "Italian Luxury",
                features: ["Clifftop Villa", "Private Yacht", "Wine Estate"]
            },
            {
                id: 6,
                name: "Maldives",
                description: "Private island resorts with underwater suites, personal butlers, and coral reef conservation experiences.",
                image: "https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=90",
                cta: "Select Private Island",
                badge: "Ultimate Seclusion",
                features: ["Underwater Suite", "Personal Butler", "Marine Conservation"]
            },
            {
                id: 7,
                name: "Paris, France",
                description: "Private apartments overlooking the Seine with exclusive access to fashion shows and culinary masterclasses.",
                image: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=90",
                cta: "View Parisian Itinerary",
                badge: "City of Light",
                features: ["Seine View", "Fashion Access", "Culinary Masterclass"]
            }
        ];
        
        // DOM elements
        const slider = document.getElementById('slider');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const progressBar = document.getElementById('progressBar');
        const currentSlideEl = document.getElementById('currentSlide');
        const totalSlidesEl = document.getElementById('totalSlides');
        
        let currentIndex = 0;
        const totalSlides = destinations.length;
        
        // Initialize the slider
        function initSlider() {
            // Set total slides
            totalSlidesEl.textContent = totalSlides;
            currentSlideEl.textContent = currentIndex + 1;
            
            // Clear slider
            slider.innerHTML = '';
            
            // Create cards
            destinations.forEach((destination, index) => {
                // Create card
                const card = document.createElement('div');
                card.className = 'travel-card';
                card.innerHTML = `
                    <div class="card-image-container">
                        <img src="${destination.image}" alt="${destination.name}" class="card-image" loading="lazy">
                    </div>
                    <div class="card-content">
                        <div class="card-badge">${destination.badge}</div>
                        <h2 class="card-title">${destination.name}</h2>
                        <p class="card-description">${destination.description}</p>
                        <div class="card-features">
                            ${destination.features.map(feature => `
                                <div class="feature">
                                    <i class="fas fa-check-circle"></i>
                                    <span>${feature}</span>
                                </div>
                            `).join('')}
                        </div>
                        <button class="card-button">
                            <span class="button-text">${destination.cta}</span>
                            <span class="button-icon"><i class="fas fa-arrow-right"></i></span>
                        </button>
                    </div>
                `;
                
                // Add click event to card button
                const cardButton = card.querySelector('.card-button');
                cardButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    showBookingModal(destination.name);
                });
                
                // Add click event to card for selection
                card.addEventListener('click', (e) => {
                    if (!e.target.closest('.card-button')) {
                        scrollToCard(index);
                    }
                });
                
                slider.appendChild(card);
            });
            
            // Update progress bar width
            updateProgressBar();
            
            // Set up navigation buttons
            prevBtn.addEventListener('click', () => {
                currentIndex = Math.max(0, currentIndex - 1);
                scrollToCard(currentIndex);
            });
            
            nextBtn.addEventListener('click', () => {
                currentIndex = Math.min(totalSlides - 1, currentIndex + 1);
                scrollToCard(currentIndex);
            });
            
            // Update on scroll
            slider.addEventListener('scroll', updateOnScroll);
            
            // Add keyboard navigation
            document.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    prevBtn.click();
                } else if (e.key === 'ArrowRight') {
                    nextBtn.click();
                }
            });
            
            // Add auto-scroll on hover for a cinematic effect
            let autoScrollTimeout;
            slider.addEventListener('mouseenter', () => {
                autoScrollTimeout = setTimeout(() => {
                    if (currentIndex < totalSlides - 1) {
                        nextBtn.click();
                    } else {
                        currentIndex = 0;
                        scrollToCard(0);
                    }
                }, 5000);
            });
            
            slider.addEventListener('mouseleave', () => {
                clearTimeout(autoScrollTimeout);
            });
        }
        
        // Scroll to specific card
        function scrollToCard(index) {
            const cardWidth = document.querySelector('.travel-card').offsetWidth + 30; // 30px gap
            currentIndex = index;
            
            slider.scrollTo({
                left: index * cardWidth,
                behavior: 'smooth'
            });
            
            updateProgressBar();
            updateCounter();
        }
        
        // Update progress bar
        function updateProgressBar() {
            const progress = ((currentIndex + 1) / totalSlides) * 100;
            progressBar.style.transform = `translateX(${currentIndex * (100 / totalSlides)}%)`;
        }
        
        // Update counter
        function updateCounter() {
            currentSlideEl.textContent = currentIndex + 1;
        }
        
        // Update on scroll
        function updateOnScroll() {
            const cardWidth = document.querySelector('.travel-card').offsetWidth + 30;
            const scrollPosition = slider.scrollLeft;
            const newIndex = Math.round(scrollPosition / cardWidth);
            
            if (newIndex !== currentIndex) {
                currentIndex = newIndex;
                updateProgressBar();
                updateCounter();
            }
        }
        
        // Show booking modal
        function showBookingModal(destinationName) {
            // In a real application, this would open a modal
            // For this example, we'll show an alert
            alert(`Initiating booking process for ${destinationName}.\n\nOur luxury travel concierge will contact you within 24 hours to customize your experience.`);
            
            // Add a subtle visual feedback
            document.body.style.animation = 'none';
            setTimeout(() => {
                document.body.style.animation = 'pulse 0.5s';
            }, 10);
        }
        
        // Add CSS animation for pulse effect
        const style = document.createElement('style');
        style.textContent = `
            @keyframes pulse {
                0% { opacity: 1; }
                50% { opacity: 0.95; }
                100% { opacity: 1; }
            }
        `;
        document.head.appendChild(style);
        
        // Initialize slider when page loads
        document.addEventListener('DOMContentLoaded', initSlider);
        
        // Add parallax effect on mouse move
        document.addEventListener('mousemove', (e) => {
            const cards = document.querySelectorAll('.travel-card');
            const mouseX = e.clientX / window.innerWidth;
            const mouseY = e.clientY / window.innerHeight;
            
            cards.forEach(card => {
                const image = card.querySelector('.card-image');
                const moveX = (mouseX - 0.5) * 20;
                const moveY = (mouseY - 0.5) * 20;
                
                image.style.transform = `scale(1.1) translate(${moveX}px, ${moveY}px)`;
            });
        });

Travel Collection Slider Template Preview

Download Options