Travel Destinations 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 Destinations</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Discover <span>Extraordinary</span> Destinations</h1>
            <p>Explore our curated collection of the world's most breathtaking travel experiences, designed for the discerning traveler seeking luxury and adventure.</p>
        </div>
        
        <div class="slider-wrapper">
            <div class="slider-container">
                <div class="slider">
                    
                </div>
            </div>
        </div>
        
        <div class="slider-controls">
            <div class="slider-nav">
                <button class="slider-btn" id="prev-btn">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="slider-btn" id="next-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
            
            <div class="slider-dots" id="slider-dots">
                
            </div>
            
            <div class="slider-progress">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
        </div>
        
        <div class="instructions">
            <div><i class="fas fa-arrows-alt-h"></i> Drag to navigate</div>
            <div><i class="fas fa-desktop"></i> 3 cards on desktop</div>
            <div><i class="fas fa-tablet-alt"></i> 2 cards on tablet</div>
            <div><i class="fas fa-mobile-alt"></i> 1 card on mobile</div>
        </div>
        
        <div class="footer">
            <div class="logo">Luxe<span>Travel</span></div>
            <p>Premium travel experiences curated for exceptional journeys</p>
        </div>
    </div>

</body>
</html>

CSS

:root {
            --primary: #0a2540;
            --secondary: #1d4e89;
            --accent: #d4af37;
            --light: #f8f9fa;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 60px 20px;
            position: relative;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80&w=1935&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            opacity: 0.03;
            z-index: -1;
        }
        
        .container {
            width: 100%;
            max-width: 1600px;
            padding: 0 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 60px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }
        
        .header::after {
            content: '';
            display: block;
            width: 120px;
            height: 4px;
            background: linear-gradient(to right, transparent, var(--accent), transparent);
            margin: 25px auto 0;
            border-radius: 2px;
        }
        
        .header h1 {
            font-size: 3.2rem;
            font-weight: 300;
            color: var(--primary);
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }
        
        .header h1 span {
            font-weight: 600;
            color: var(--secondary);
            position: relative;
        }
        
        .header h1 span::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: rgba(212, 175, 55, 0.2);
            z-index: -1;
        }
        
        .header p {
            color: var(--gray);
            font-size: 1.15rem;
            line-height: 1.7;
            font-weight: 400;
        }
        
        .slider-container {
            position: relative;
            overflow: hidden;
            padding: 30px 10px;
            margin: 0 auto;
        }
        
        .slider-wrapper {
            position: relative;
        }
        
        .slider {
            display: flex;
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: grab;
            gap: 35px;
            padding: 15px 10px;
            will-change: transform;
        }
        
        .slider.dragging {
            transition: none;
            cursor: grabbing;
        }
        
        .card {
            background-color: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(10, 37, 64, 0.08);
            flex: 0 0 calc(33.333% - 24px);
            min-width: 0;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.7));
            z-index: 1;
            opacity: 0;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 60px rgba(10, 37, 64, 0.15);
        }
        
        .card:hover::before {
            opacity: 1;
        }
        
        .card-image {
            height: 280px;
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }
        
        .card:hover .card-image img {
            transform: scale(1.08);
        }
        
        .card-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: var(--accent);
            color: var(--primary);
            padding: 8px 18px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 700;
            z-index: 3;
            letter-spacing: 0.5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .card-content {
            padding: 28px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
            background-color: white;
        }
        
        .card-title {
            font-size: 1.65rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 15px;
            line-height: 1.3;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .card-title span {
            font-size: 1rem;
            color: var(--secondary);
            font-weight: 500;
        }
        
        .card-description {
            color: var(--gray);
            line-height: 1.7;
            margin-bottom: 25px;
            flex-grow: 1;
            font-size: 0.98rem;
        }
        
        .card-features {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--secondary);
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .feature i {
            color: var(--accent);
            font-size: 1rem;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
        }
        
        .price {
            display: flex;
            flex-direction: column;
        }
        
        .price-amount {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary);
            line-height: 1;
        }
        
        .price-detail {
            font-size: 0.9rem;
            color: var(--gray);
            font-weight: 400;
        }
        
        .book-btn {
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1rem;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 20px rgba(29, 78, 137, 0.2);
        }
        
        .book-btn:hover {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(29, 78, 137, 0.3);
        }
        
        .slider-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 50px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .slider-nav {
            display: flex;
            gap: 15px;
        }
        
        .slider-btn {
            background-color: white;
            border: 2px solid var(--light-gray);
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .slider-btn:hover {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-3px);
        }
        
        .slider-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }
        
        .slider-btn:disabled:hover {
            background-color: white;
            color: var(--primary);
            border-color: var(--light-gray);
        }
        
        .slider-dots {
            display: flex;
            gap: 12px;
        }
        
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--light-gray);
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }
        
        .dot.active {
            background-color: var(--primary);
            transform: scale(1.3);
        }
        
        .dot::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 1px solid transparent;
            transition: var(--transition);
        }
        
        .dot.active::after {
            border-color: var(--primary);
        }
        
        .slider-progress {
            width: 200px;
            height: 4px;
            background-color: var(--light-gray);
            border-radius: 2px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, var(--secondary), var(--accent));
            width: 0%;
            transition: width 0.5s ease;
        }
        
        /* Responsive styles */
        @media (max-width: 1200px) {
            .card {
                flex: 0 0 calc(50% - 18px);
            }
            
            .header h1 {
                font-size: 2.8rem;
            }
        }
        
        @media (max-width: 768px) {
            .card {
                flex: 0 0 100%;
            }
            
            .header h1 {
                font-size: 2.4rem;
            }
            
            .header p {
                font-size: 1.05rem;
            }
            
            .slider {
                gap: 25px;
            }
            
            .card-image {
                height: 240px;
            }
            
            .slider-controls {
                flex-direction: column;
                gap: 25px;
            }
            
            .slider-progress {
                order: -1;
                width: 100%;
                max-width: 300px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 40px 15px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .card-image {
                height: 220px;
            }
            
            .card-content {
                padding: 22px;
            }
            
            .card-title {
                font-size: 1.4rem;
            }
            
            .price-amount {
                font-size: 1.8rem;
            }
            
            .book-btn {
                padding: 12px 24px;
                font-size: 0.95rem;
            }
            
            .slider-controls {
                margin-top: 40px;
            }
        }
        
        .instructions {
            text-align: center;
            margin-top: 50px;
            color: var(--gray);
            font-size: 0.95rem;
            max-width: 700px;
            line-height: 1.6;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .instructions i {
            color: var(--accent);
            margin-right: 5px;
        }
        
        .card-rating {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: var(--accent);
            font-size: 0.95rem;
        }
        
        .card-rating span {
            color: var(--gray);
            margin-left: 8px;
            font-weight: 500;
        }
        
        .footer {
            margin-top: 70px;
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
            padding-top: 20px;
            border-top: 1px solid var(--light-gray);
            width: 100%;
            max-width: 800px;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
        
        .logo span {
            color: var(--accent);
        }

JavaScript

// Enhanced travel destinations data
        const destinations = [
            {
                id: 1,
                title: "Santorini, Greece",
                location: "Aegean Sea",
                description: "Experience iconic white-washed architecture against the deep blue Aegean Sea. Private sunset views from luxury cliffside suites.",
                price: 2899,
                image: "https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.9,
                badge: "LUXURY",
                days: 7,
                features: ["Private Villa", "Gourmet Dining", "Sunset Cruises"]
            },
            {
                id: 2,
                title: "Kyoto, Japan",
                location: "Kansai Region",
                description: "Immerse yourself in traditional Japanese culture with private tea ceremonies, ancient temples, and serene bamboo forest walks.",
                price: 3599,
                image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.8,
                badge: "CULTURAL",
                days: 10,
                features: ["Tea Ceremony", "Temple Stays", "Kaiseki Dining"]
            },
            {
                id: 3,
                title: "Maldives Overwater",
                location: "Indian Ocean",
                description: "Luxury overwater villas with direct lagoon access, private butlers, and world-class diving in pristine coral atolls.",
                price: 4999,
                image: "https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.95,
                badge: "EXCLUSIVE",
                days: 8,
                features: ["Private Pool", "Spa Treatments", "Scuba Diving"]
            },
            {
                id: 4,
                title: "Swiss Alps Retreat",
                location: "Zermatt",
                description: "Majestic alpine views from luxury chalets, private ski guides, and gourmet dining with panoramic mountain vistas.",
                price: 4299,
                image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.7,
                badge: "ADVENTURE",
                days: 9,
                features: ["Ski-in/Ski-out", "Private Guide", "Alpine Spa"]
            },
            {
                id: 5,
                title: "Safari in Serengeti",
                location: "Tanzania",
                description: "Private guided safaris to witness the great migration, luxury tented camps, and exclusive wildlife viewing experiences.",
                price: 5499,
                image: "https://images.unsplash.com/photo-1516426122078-c23e76319801?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.9,
                badge: "WILDLIFE",
                days: 12,
                features: ["Private Game Drives", "Balloon Safari", "Bush Dining"]
            },
            {
                id: 6,
                title: "Venice, Italy",
                location: "Veneto",
                description: "Private gondola rides through hidden canals, Renaissance palace stays, and exclusive artisanal dining experiences.",
                price: 3299,
                image: "https://images.unsplash.com/photo-1514890547357-a9ee288728e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.6,
                badge: "ROMANTIC",
                days: 6,
                features: ["Private Gondola", "Palace Stay", "Wine Tasting"]
            },
            {
                id: 7,
                title: "Bora Bora, French Polynesia",
                location: "South Pacific",
                description: "Crystal clear turquoise waters, luxury overwater bungalows, and private island experiences in paradise.",
                price: 5899,
                image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.9,
                badge: "PARADISE",
                days: 10,
                features: ["Overwater Villa", "Private Lagoon", "Island Hopping"]
            },
            {
                id: 8,
                title: "Dubai, UAE",
                location: "Arabian Desert",
                description: "Ultra-modern luxury meets ancient desert traditions with private desert safaris and 7-star accommodations.",
                price: 3899,
                image: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.7,
                badge: "LUXURY",
                days: 8,
                features: ["Desert Safari", "Private Yacht", "Burj Khalifa Access"]
            },
            {
                id: 9,
                title: "Patagonia, Chile",
                location: "Torres del Paine",
                description: "Remote wilderness exploration with luxury eco-lodges, private hiking guides, and breathtaking glacial landscapes.",
                price: 4699,
                image: "https://images.unsplash.com/photo-1526392587636-9a0e8a0e5c6a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.8,
                badge: "ADVENTURE",
                days: 11,
                features: ["Eco-Lodge", "Private Guide", "Glacier Trekking"]
            },
            {
                id: 10,
                title: "Kyoto, Japan",
                location: "Kansai Region",
                description: "Immerse yourself in traditional Japanese culture with private tea ceremonies, ancient temples, and serene bamboo forest walks.",
                price: 3599,
                image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.8,
                badge: "CULTURAL",
                days: 10,
                features: ["Tea Ceremony", "Temple Stays", "Kaiseki Dining"]
            },
            {
                id: 11,
                title: "Santorini, Greece",
                location: "Aegean Sea",
                description: "Experience iconic white-washed architecture against the deep blue Aegean Sea. Private sunset views from luxury cliffside suites.",
                price: 2899,
                image: "https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.9,
                badge: "LUXURY",
                days: 7,
                features: ["Private Villa", "Gourmet Dining", "Sunset Cruises"]
            },
            {
                id: 12,
                title: "Maldives Overwater",
                location: "Indian Ocean",
                description: "Luxury overwater villas with direct lagoon access, private butlers, and world-class diving in pristine coral atolls.",
                price: 4999,
                image: "https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
                rating: 4.95,
                badge: "EXCLUSIVE",
                days: 8,
                features: ["Private Pool", "Spa Treatments", "Scuba Diving"]
            }
        ];

// DOM Elements
        const slider = document.querySelector('.slider');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const dotsContainer = document.getElementById('slider-dots');
        const progressBar = document.getElementById('progress-bar');
        
        // Slider state
        let currentPosition = 0;
        let isDragging = false;
        let startPosition = 0;
        let currentTranslate = 0;
        let prevTranslate = 0;
        let currentIndex = 0;
        let cardWidth = 0;
        let cardsPerView = 3;
        let autoSlideInterval;
        
        // Initialize the slider
        function initSlider() {
            updateCardsPerView();
            renderCards();
            renderDots();
            updateSliderPosition();
            setupEventListeners();
            startAutoSlide();
        }
        
        // Update cards per view based on screen size
        function updateCardsPerView() {
            if (window.innerWidth <= 768) {
                cardsPerView = 1;
            } else if (window.innerWidth <= 1200) {
                cardsPerView = 2;
            } else {
                cardsPerView = 3;
            }
            
            // Update card width
            const containerStyle = getComputedStyle(slider.parentElement);
            const containerPadding = parseFloat(containerStyle.paddingLeft) + parseFloat(containerStyle.paddingRight);
            const containerWidth = slider.parentElement.clientWidth - containerPadding;
            
            cardWidth = (containerWidth / cardsPerView) - 35 + (35 / cardsPerView);
            
            // Update all cards width
            document.querySelectorAll('.card').forEach(card => {
                card.style.flex = `0 0 ${cardWidth}px`;
            });
            
            // Update slider position
            updateSliderPosition();
        }
        
        // Render destination cards
        function renderCards() {
            slider.innerHTML = '';
            
            destinations.forEach(destination => {
                const card = document.createElement('div');
                card.className = 'card';
                card.innerHTML = `
                    <div class="card-badge">${destination.badge}</div>
                    <div class="card-image">
                        <img src="${destination.image}" alt="${destination.title}" loading="lazy">
                    </div>
                    <div class="card-content">
                        <div class="card-rating">
                            ${generateStars(destination.rating)}
                            <span>${destination.rating} • ${destination.days} days</span>
                        </div>
                        <h3 class="card-title">${destination.title} <span>${destination.location}</span></h3>
                        <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>
                        
                        <div class="card-footer">
                            <div class="price">
                                <div class="price-amount">$${destination.price}</div>
                                <div class="price-detail">per person</div>
                            </div>
                            <button class="book-btn" data-id="${destination.id}">
                                <i class="fas fa-calendar-check"></i>
                                Book Now
                            </button>
                        </div>
                    </div>
                `;
                
                slider.appendChild(card);
            });
            
            // Update card width after rendering
            setTimeout(() => {
                updateCardsPerView();
            }, 10);
        }
        
        // Generate star rating HTML
        function generateStars(rating) {
            let starsHTML = '';
            const fullStars = Math.floor(rating);
            const hasHalfStar = rating % 1 >= 0.5;
            
            for (let i = 0; i < 5; i++) {
                if (i < fullStars) {
                    starsHTML += '<i class="fas fa-star"></i>';
                } else if (i === fullStars && hasHalfStar) {
                    starsHTML += '<i class="fas fa-star-half-alt"></i>';
                } else {
                    starsHTML += '<i class="far fa-star"></i>';
                }
            }
            
            return starsHTML;
        }
        
        // Render slider dots
        function renderDots() {
            dotsContainer.innerHTML = '';
            const dotsCount = Math.ceil(destinations.length / cardsPerView);
            
            for (let i = 0; i < dotsCount; i++) {
                const dot = document.createElement('div');
                dot.className = `dot ${i === 0 ? 'active' : ''}`;
                dot.dataset.index = i;
                dot.addEventListener('click', () => goToSlide(i));
                dotsContainer.appendChild(dot);
            }
        }
        
        // Update slider position
        function updateSliderPosition() {
            const maxIndex = Math.ceil(destinations.length / cardsPerView) - 1;
            
            // Ensure currentIndex is within bounds
            if (currentIndex > maxIndex) {
                currentIndex = maxIndex;
            }
            
            // Calculate translate value
            const translateX = -currentIndex * (cardWidth + 35) * cardsPerView;
            slider.style.transform = `translateX(${translateX}px)`;
            
            // Update active dot
            document.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === currentIndex);
            });
            
            // Update progress bar
            const progress = ((currentIndex + 1) / (maxIndex + 1)) * 100;
            progressBar.style.width = `${progress}%`;
            
            // Update button states
            prevBtn.disabled = currentIndex === 0;
            nextBtn.disabled = currentIndex === maxIndex;
        }
        
        // Go to specific slide
        function goToSlide(index) {
            const maxIndex = Math.ceil(destinations.length / cardsPerView) - 1;
            currentIndex = Math.max(0, Math.min(index, maxIndex));
            updateSliderPosition();
            resetAutoSlide();
        }
        
        // Next slide
        function nextSlide() {
            const maxIndex = Math.ceil(destinations.length / cardsPerView) - 1;
            if (currentIndex < maxIndex) {
                currentIndex++;
                updateSliderPosition();
            } else {
                // Loop to beginning
                currentIndex = 0;
                updateSliderPosition();
            }
            resetAutoSlide();
        }
        
        // Previous slide
        function prevSlide() {
            const maxIndex = Math.ceil(destinations.length / cardsPerView) - 1;
            if (currentIndex > 0) {
                currentIndex--;
                updateSliderPosition();
            } else {
                // Loop to end
                currentIndex = maxIndex;
                updateSliderPosition();
            }
            resetAutoSlide();
        }
        
        // Auto slide functionality
        function startAutoSlide() {
            autoSlideInterval = setInterval(nextSlide, 5000);
        }
        
        function resetAutoSlide() {
            clearInterval(autoSlideInterval);
            startAutoSlide();
        }
        
        // Drag and swipe functionality
        function startDrag(e) {
            isDragging = true;
            startPosition = getPositionX(e);
            prevTranslate = currentTranslate;
            slider.classList.add('dragging');
            
            // Cancel auto slide during drag
            clearInterval(autoSlideInterval);
        }
        
        function drag(e) {
            if (!isDragging) return;
            
            const currentPosition = getPositionX(e);
            currentTranslate = prevTranslate + currentPosition - startPosition;
            
            // Apply the translation
            slider.style.transform = `translateX(${currentTranslate}px)`;
        }
        
        function endDrag() {
            if (!isDragging) return;
            
            isDragging = false;
            slider.classList.remove('dragging');
            
            // Determine if we should change slide
            const movedBy = currentTranslate - prevTranslate;
            const threshold = cardWidth / 3;
            
            if (movedBy < -threshold && currentIndex < Math.ceil(destinations.length / cardsPerView) - 1) {
                currentIndex++;
            } else if (movedBy > threshold && currentIndex > 0) {
                currentIndex--;
            }
            
            updateSliderPosition();
            resetAutoSlide();
        }
        
        function getPositionX(e) {
            return e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
        }
        
        // Setup event listeners
        function setupEventListeners() {
            // Button events
            prevBtn.addEventListener('click', prevSlide);
            nextBtn.addEventListener('click', nextSlide);
            
            // Mouse events for dragging
            slider.addEventListener('mousedown', startDrag);
            window.addEventListener('mousemove', drag);
            window.addEventListener('mouseup', endDrag);
            
            // Touch events for mobile
            slider.addEventListener('touchstart', startDrag, {passive: true});
            window.addEventListener('touchmove', drag, {passive: true});
            window.addEventListener('touchend', endDrag);
            
            // Prevent default drag behavior on images
            slider.querySelectorAll('img').forEach(img => {
                img.addEventListener('dragstart', (e) => e.preventDefault());
            });
            
            // Book Now buttons
            document.addEventListener('click', (e) => {
                if (e.target.closest('.book-btn')) {
                    const btn = e.target.closest('.book-btn');
                    const id = btn.dataset.id;
                    const destination = destinations.find(d => d.id == id);
                    
                    // Simulate booking
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
                    btn.disabled = true;
                    
                    setTimeout(() => {
                        alert(`Booking confirmed for ${destination.title}\nTotal: $${destination.price} per person\nThank you for choosing LuxeTravel!`);
                        btn.innerHTML = '<i class="fas fa-calendar-check"></i> Book Now';
                        btn.disabled = false;
                    }, 1500);
                }
            });
            
            // Window resize
            window.addEventListener('resize', () => {
                updateCardsPerView();
                renderDots();
                updateSliderPosition();
                resetAutoSlide();
            });
            
            // Pause auto slide on hover
            slider.addEventListener('mouseenter', () => {
                clearInterval(autoSlideInterval);
            });
            
            slider.addEventListener('mouseleave', () => {
                resetAutoSlide();
            });
        }
        
        // Initialize the slider when the page loads
        document.addEventListener('DOMContentLoaded', initSlider);

Travel Destinations Slider Template Preview

Download Options