Travel Deals 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>LuxeTravel | Premium Travel Deals</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=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="logo">
                <i class="fas fa-compass logo-icon"></i>
                <div class="logo-text">LuxeTravel</div>
            </div>
            <p class="tagline">Discover world-class destinations with exclusive offers curated for discerning travelers. Limited availability on premium packages.</p>
            <div class="highlight-text">
                <i class="fas fa-star"></i>
                <span>Trusted by 50,000+ travelers worldwide</span>
            </div>
        </header>
        
        <section class="slider-section">
            <div class="slider-container">
                <div class="slider" id="slider">
                    
                </div>
                
                <div class="slider-controls">
                    <button class="slider-btn" id="prevBtn">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="slider-btn" id="nextBtn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                
                <div class="slider-dots" id="sliderDots">
                    
                </div>
                
                <div class="slider-progress">
                    <div class="progress-bar" id="progressBar"></div>
                </div>
            </div>
        </section>
        
        <footer class="footer">
            <p>© 2023 LuxeTravel. All rights reserved. Deals are subject to availability and may change without notice.</p>
            <div class="footer-links">
                <a href="#" class="footer-link">Terms & Conditions</a>
                <a href="#" class="footer-link">Privacy Policy</a>
                <a href="#" class="footer-link">Contact Us</a>
                <a href="#" class="footer-link">About LuxeTravel</a>
            </div>
        </footer>
    </div>

</body>
</html>

CSS

:root {
            --primary-color: #1a365d;
            --secondary-color: #2d3748;
            --accent-color: #c53030;
            --accent-light: #fed7d7;
            --gradient-primary: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
            --gradient-accent: linear-gradient(135deg, #c53030 0%, #e53e3e 100%);
            --light-bg: #f8f9fa;
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
            --border-radius: 16px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #edf2f7 100%);
            color: var(--secondary-color);
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        /* Header Styles */
        .header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }
        
        .header:after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--gradient-accent);
            border-radius: 2px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .logo-icon {
            color: var(--accent-color);
            font-size: 2rem;
        }
        
        .logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 600;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
        }
        
        .tagline {
            font-size: 1.1rem;
            color: #718096;
            max-width: 600px;
            margin: 0 auto 15px;
            font-weight: 400;
        }
        
        .highlight-text {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--accent-color);
            font-weight: 600;
            font-size: 1rem;
            background-color: var(--accent-light);
            padding: 6px 16px;
            border-radius: 30px;
            margin-top: 10px;
        }
        
        /* Slider Container */
        .slider-section {
            position: relative;
            padding: 20px 0 80px;
        }
        
        .slider-container {
            position: relative;
            overflow: hidden;
            padding: 20px 10px;
        }
        
        .slider {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 30px 20px;
            scrollbar-width: none;
        }
        
        .slider::-webkit-scrollbar {
            display: none;
        }
        
        /* Card Styles */
        .card {
            min-width: 360px;
            max-width: 360px;
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-12px);
            box-shadow: var(--card-shadow-hover);
        }
        
        .card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-accent);
            z-index: 2;
        }
        
        .image-container {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        
        .destination-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        
        .card:hover .destination-image {
            transform: scale(1.08);
        }
        
        .image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
            color: white;
            padding: 25px 25px 15px;
        }
        
        .destination {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: white;
            letter-spacing: 0.5px;
        }
        
        .destination-subtitle {
            font-size: 0.9rem;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .discount-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--gradient-accent);
            color: white;
            font-weight: 700;
            padding: 10px 18px;
            border-radius: 30px;
            font-size: 1rem;
            box-shadow: 0 8px 15px rgba(197, 48, 48, 0.3);
            z-index: 3;
            letter-spacing: 0.5px;
        }
        
        .card-content {
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        
        .card-description {
            color: #718096;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 25px;
            flex-grow: 1;
        }
        
        .features {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: #4a5568;
        }
        
        .feature i {
            color: var(--accent-color);
        }
        
        .price-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25px;
        }
        
        .price-wrapper {
            display: flex;
            flex-direction: column;
        }
        
        .price-label {
            font-size: 0.9rem;
            color: #718096;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .original-price {
            text-decoration: line-through;
            color: #a0aec0;
            font-size: 1.1rem;
            font-weight: 500;
        }
        
        .offer-price {
            color: var(--primary-color);
            font-size: 2.2rem;
            font-weight: 700;
            line-height: 1;
        }
        
        .per-person {
            font-size: 0.9rem;
            color: #718096;
            margin-top: 5px;
        }
        
        .savings {
            background-color: var(--accent-light);
            color: var(--accent-color);
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.9rem;
            text-align: center;
        }
        
        .cta-button {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 10px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            letter-spacing: 0.5px;
        }
        
        .cta-button:hover {
            background: var(--gradient-accent);
            box-shadow: 0 10px 20px rgba(197, 48, 48, 0.2);
            transform: translateY(-2px);
        }
        
        /* Slider Controls */
        .slider-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }
        
        .slider-btn {
            background: white;
            border: none;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            color: var(--primary-color);
            font-size: 1.3rem;
        }
        
        .slider-btn:hover {
            background: var(--gradient-primary);
            color: white;
            transform: scale(1.1);
        }
        
        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 30px;
        }
        
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #cbd5e0;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .dot.active {
            background-color: var(--accent-color);
            transform: scale(1.3);
        }
        
        .slider-progress {
            height: 4px;
            background-color: #e2e8f0;
            border-radius: 2px;
            width: 300px;
            max-width: 80%;
            margin: 30px auto 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: var(--gradient-accent);
            width: 20%;
            transition: width 0.3s ease;
        }
        
        /* Footer */
        .footer {
            text-align: center;
            margin-top: 60px;
            color: #718096;
            font-size: 0.9rem;
            padding-top: 30px;
            border-top: 1px solid #e2e8f0;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 25px;
            margin-top: 15px;
        }
        
        .footer-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .footer-link:hover {
            color: var(--accent-color);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .card {
                min-width: 340px;
                max-width: 340px;
            }
        }
        
        @media (max-width: 992px) {
            .card {
                min-width: 320px;
                max-width: 320px;
            }
            
            .slider {
                gap: 25px;
            }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 30px 15px;
            }
            
            .header {
                margin-bottom: 40px;
            }
            
            .logo-text {
                font-size: 2rem;
            }
            
            .card {
                min-width: 300px;
                max-width: 300px;
            }
            
            .destination {
                font-size: 1.6rem;
            }
            
            .slider-controls {
                margin-top: 30px;
            }
        }
        
        @media (max-width: 576px) {
            .container {
                padding: 20px 10px;
            }
            
            .logo-text {
                font-size: 1.8rem;
            }
            
            .tagline {
                font-size: 1rem;
                padding: 0 10px;
            }
            
            .card {
                min-width: 280px;
                max-width: 280px;
            }
            
            .card-content {
                padding: 20px;
            }
            
            .features {
                flex-direction: column;
                gap: 10px;
            }
            
            .slider-btn {
                width: 50px;
                height: 50px;
            }
        }
        
        /* Animation for new cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .card {
            animation: fadeInUp 0.5s ease forwards;
        }
        
        /* Stagger animation for cards */
        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }
        .card:nth-child(5) { animation-delay: 0.5s; }
        .card:nth-child(6) { animation-delay: 0.6s; }

JavaScript

// Premium travel deals data
        const travelDeals = [
            {
                id: 1,
                destination: "Bali Luxury Escape",
                subtitle: "Indonesia",
                description: "Experience ultimate luxury in a private villa with infinity pool, personal butler, and curated cultural experiences. Includes gourmet dining and spa treatments.",
                originalPrice: 4499,
                offerPrice: 3299,
                discount: 27,
                duration: "7 nights",
                guests: "2 adults",
                includes: ["Private Villa", "Spa Access", "Airport Transfer"],
                image: "https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 2,
                destination: "Swiss Alpine Retreat",
                subtitle: "Switzerland",
                description: "Exclusive ski-in/ski-out chalet with private chef, guided backcountry tours, and wellness spa. Perfect for winter sports enthusiasts.",
                originalPrice: 5899,
                offerPrice: 4699,
                discount: 20,
                duration: "6 nights",
                guests: "2-4 guests",
                includes: ["Ski Pass", "Gourmet Meals", "Spa Access"],
                image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 3,
                destination: "Kyoto Cultural Journey",
                subtitle: "Japan",
                description: "Immerse yourself in Japanese tradition with stays in premium ryokans, tea ceremonies with masters, and private guided temple tours.",
                originalPrice: 5199,
                offerPrice: 4199,
                discount: 19,
                duration: "8 nights",
                guests: "2 adults",
                includes: ["Ryokan Stay", "Cultural Tours", "Bullet Train"],
                image: "https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 4,
                destination: "Santorini Elite Experience",
                subtitle: "Greece",
                description: "Luxury cave suite with caldera views, private yacht sunset cruise, and wine tasting at award-winning vineyards with a sommelier.",
                originalPrice: 5399,
                offerPrice: 4299,
                discount: 20,
                duration: "5 nights",
                guests: "2 adults",
                includes: ["Cave Suite", "Yacht Cruise", "Wine Tasting"],
                image: "https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 5,
                destination: "Maldives Overwater Paradise",
                subtitle: "Maldives",
                description: "Ultimate luxury in an overwater villa with private pool, personal butler, and unlimited water activities including diving with marine biologists.",
                originalPrice: 7999,
                offerPrice: 6299,
                discount: 21,
                duration: "7 nights",
                guests: "2 adults",
                includes: ["Overwater Villa", "All Meals", "Water Sports"],
                image: "https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
            },
            {
                id: 6,
                destination: "New York Signature Suite",
                subtitle: "USA",
                description: "Penthouse suite in Manhattan with Broadway show tickets, private shopping experience, and exclusive dining at Michelin-starred restaurants.",
                originalPrice: 6899,
                offerPrice: 5499,
                discount: 20,
                duration: "5 nights",
                guests: "2 adults",
                includes: ["Penthouse", "Broadway Tickets", "Fine Dining"],
                image: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
            }
        ];
        
        // DOM elements
        const slider = document.getElementById('slider');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const sliderDots = document.getElementById('sliderDots');
        const progressBar = document.getElementById('progressBar');
        
        let currentSlide = 0;
        
        // Create travel deal cards
        function createCards() {
            slider.innerHTML = '';
            
            travelDeals.forEach(deal => {
                const card = document.createElement('div');
                card.className = 'card';
                
                card.innerHTML = `
                    <div class="image-container">
                        <img src="${deal.image}" alt="${deal.destination}" class="destination-image">
                        <div class="discount-badge">SAVE ${deal.discount}%</div>
                        <div class="image-overlay">
                            <h3 class="destination">${deal.destination}</h3>
                            <div class="destination-subtitle">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>${deal.subtitle}</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-content">
                        <p class="card-description">${deal.description}</p>
                        
                        <div class="features">
                            <div class="feature">
                                <i class="far fa-calendar"></i>
                                <span>${deal.duration}</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-user-friends"></i>
                                <span>${deal.guests}</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-star"></i>
                                <span>Premium Package</span>
                            </div>
                        </div>
                        
                        <div class="price-container">
                            <div class="price-wrapper">
                                <div class="price-label">STARTING FROM</div>
                                <div>
                                    <span class="original-price">$${deal.originalPrice}</span>
                                    <div class="offer-price">$${deal.offerPrice}</div>
                                    <div class="per-person">per package</div>
                                </div>
                            </div>
                            <div class="savings">Save $${deal.originalPrice - deal.offerPrice}</div>
                        </div>
                        
                        <button class="cta-button" onclick="selectDeal(${deal.id})">
                            <i class="fas fa-lock"></i> RESERVE THIS DEAL
                        </button>
                    </div>
                `;
                
                slider.appendChild(card);
            });
        }
        
        // Create slider dots
        function createDots() {
            sliderDots.innerHTML = '';
            
            travelDeals.forEach((deal, index) => {
                const dot = document.createElement('div');
                dot.className = `dot ${index === 0 ? 'active' : ''}`;
                dot.dataset.index = index;
                dot.addEventListener('click', () => {
                    scrollToCard(index);
                });
                sliderDots.appendChild(dot);
            });
        }
        
        // Scroll to specific card
        function scrollToCard(index) {
            const cardWidth = document.querySelector('.card').offsetWidth + 30;
            slider.scrollLeft = index * cardWidth;
            currentSlide = index;
            updateDots();
            updateProgressBar();
        }
        
        // Update active dot
        function updateDots() {
            document.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === currentSlide);
            });
        }
        
        // Update progress bar
        function updateProgressBar() {
            const progress = ((currentSlide + 1) / travelDeals.length) * 100;
            progressBar.style.width = `${progress}%`;
        }
        
        // Handle deal selection
        function selectDeal(id) {
            const deal = travelDeals.find(d => d.id === id);
            // Create a modal-like effect
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,0.85);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
                animation: fadeIn 0.3s ease;
            `;
            
            modal.innerHTML = `
                <div style="background: white; border-radius: 16px; padding: 40px; max-width: 500px; width: 90%; animation: fadeInUp 0.4s ease;">
                    <h2 style="color: var(--primary-color); margin-bottom: 15px; font-family: 'Playfair Display', serif;">Excellent Choice!</h2>
                    <p style="margin-bottom: 25px; color: #4a5568;">You've selected the <strong>${deal.destination}</strong> package for <strong>$${deal.offerPrice}</strong>. Our travel concierge will contact you within 24 hours to finalize your booking.</p>
                    <button onclick="this.parentElement.parentElement.remove()" style="background: var(--gradient-accent); color: white; border: none; padding: 14px 28px; border-radius: 8px; font-weight: 600; cursor: pointer; width: 100%;">
                        <i class="fas fa-check"></i> CONFIRM SELECTION
                    </button>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // Add keyframe styles for animation
            const style = document.createElement('style');
            style.innerHTML = `
                @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
                @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
            `;
            document.head.appendChild(style);
        }
        
        // Initialize the slider
        function initSlider() {
            createCards();
            createDots();
            updateProgressBar();
            
            // Next button click
            nextBtn.addEventListener('click', () => {
                currentSlide = (currentSlide + 1) % travelDeals.length;
                scrollToCard(currentSlide);
            });
            
            // Previous button click
            prevBtn.addEventListener('click', () => {
                currentSlide = (currentSlide - 1 + travelDeals.length) % travelDeals.length;
                scrollToCard(currentSlide);
            });
            
            // Update dots and progress on scroll
            slider.addEventListener('scroll', () => {
                const cardWidth = document.querySelector('.card').offsetWidth + 30;
                currentSlide = Math.round(slider.scrollLeft / cardWidth);
                updateDots();
                updateProgressBar();
            });
            
            // Auto-advance slider every 8 seconds (optional)
            let autoSlide = setInterval(() => {
                nextBtn.click();
            }, 8000);
            
            // Pause auto-slide on hover
            slider.addEventListener('mouseenter', () => clearInterval(autoSlide));
            slider.addEventListener('mouseleave', () => {
                autoSlide = setInterval(() => {
                    nextBtn.click();
                }, 8000);
            });
        }
        
        // Initialize on page load
        document.addEventListener('DOMContentLoaded', initSlider);

Travel Deals Slider Template Preview

Download Options