Premium Travel Packages Slider | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Premium Travel Packages Slider</title>

<link rel="stylesheet" href="https://unpkg.com/swiper@11/swiper-bundle.min.css"/>

</head>
<body>
  <section class="section" aria-label="Featured travel packages">
    <header class="header">
      <h2 class="title"> Handpicked Travel Experiences</h2>
      <p class="subtitle">Premium, all-inclusive packages with flights, 4–5★ stays, curated activities and 24×7 assistance. Scroll, click, or use your keyboard to explore.</p>
    </header>

<div class="swiper mySwiper">
      <div class="swiper-wrapper">

<div class="swiper-slide">
          <article class="trip-card" role="group" aria-label="Paris Getaway 5 nights">
            <div class="media">
              <img src="https://images.unsplash.com/photo-1530789253388-582c481c54b0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8dHJhdmVsc3xlbnwwfHwwfHx8MA%3D%3D" alt="Paris skyline and Eiffel Tower at sunset">
              <span class="badge">Bestseller</span>
            </div>
            <div class="content">
              <h3 class="place">Paris Getaway — 5 Nights</h3>
              <div class="stars">★★★★★ <span style="opacity:.7;">4.9 (1.2k)</span></div>
              <p class="meta">Seine cruise • Eiffel priority access • Louvre tour • Airport transfers</p>
              <div class="chips">
                <span class="chip">Flights</span><span class="chip">4★ Hotel</span><span class="chip">Breakfast</span><span class="chip">Guide</span>
              </div>
              <div class="bottom">
                <div class="price">₹1,29,000 <small>per person</small></div>
                <button class="cta" aria-label="Book Paris getaway">Book Now</button>
              </div>
            </div>
          </article>
        </div>

<div class="swiper-slide">
          <article class="trip-card" role="group" aria-label="Maldives Overwater 4 nights">
            <div class="media">
              <img src="https://images.unsplash.com/photo-1605446994677-9b99e0d6647f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHRyYXZlbHN8ZW58MHx8MHx8fDA%3D" alt="Overwater villas in Maldives with turquoise water">
              <span class="badge">Couples’ Pick</span>
            </div>
            <div class="content">
              <h3 class="place">Maldives Overwater — 4 Nights</h3>
              <div class="stars">★★★★★ <span style="opacity:.7;">4.8 (980)</span></div>
              <p class="meta">Overwater villa • Snorkeling • Candle-light dinner • Speedboat transfers</p>
              <div class="chips">
                <span class="chip">Resort</span><span class="chip">HB Plan</span><span class="chip">Activities</span>
              </div>
              <div class="bottom">
                <div class="price">₹1,05,000 <small>per person</small></div>
                <button class="cta" aria-label="Book Maldives trip">Book Now</button>
              </div>
            </div>
          </article>
        </div>

<div class="swiper-slide">
          <article class="trip-card" role="group" aria-label="Dubai Adventure 6 nights">
            <div class="media">
              <img src="https://images.unsplash.com/photo-1602163700775-5176e05f0192?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTB8fHRyYXZlbHN8ZW58MHx8MHx8fDA%3D"  alt="Dubai skyline with Burj Khalifa at dusk">
              <span class="badge">20% Off</span>
            </div>
            <div class="content">
              <h3 class="place">Dubai Adventure — 6 Nights</h3>
              <div class="stars">★★★★☆ <span style="opacity:.7;">4.7 (1.8k)</span></div>
              <p class="meta">Desert safari • Burj Khalifa • Dhow cruise • Global Village</p>
              <div class="chips">
                <span class="chip">Visa</span><span class="chip">4★ Hotel</span><span class="chip">Transfers</span>
              </div>
              <div class="bottom">
                <div class="price">₹99,500 <small>per person</small></div>
                <button class="cta" aria-label="Book Dubai adventure">Book Now</button>
              </div>
            </div>
          </article>
        </div>

<div class="swiper-slide">
          <article class="trip-card" role="group" aria-label="Swiss Alps 7 nights">
            <div class="media">
              <img src="https://plus.unsplash.com/premium_photo-1664303291529-8867054222f6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzV8fHRyYXZlbHN8ZW58MHx8MHx8fDA%3D"  alt="Swiss alpine lake and mountains">
              <span class="badge">Scenic</span>
            </div>
            <div class="content">
              <h3 class="place">Swiss Alps — 7 Nights</h3>
              <div class="stars">★★★★★ <span style="opacity:.7;">4.9 (740)</span></div>
              <p class="meta">Glacier Express • Jungfraujoch • Lake Lucerne cruise</p>
              <div class="chips">
                <span class="chip">Rail Pass</span><span class="chip">4★ Hotels</span><span class="chip">Breakfast</span>
              </div>
              <div class="bottom">
                <div class="price">₹1,59,000 <small>per person</small></div>
                <button class="cta" aria-label="Book Swiss Alps tour">Book Now</button>
              </div>
            </div>
          </article>
        </div>

<div class="swiper-slide">
          <article class="trip-card" role="group" aria-label="Bali Wellness 5 nights">
            <div class="media">
              <img src="https://images.unsplash.com/photo-1602947208630-460c0463c697?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fHRyYXZlbHN8ZW58MHx8MHx8fDA%3D"  alt="Bali rice terraces and palms">
              <span class="badge">New</span>
            </div>
            <div class="content">
              <h3 class="place">Bali Wellness — 5 Nights</h3>
              <div class="stars">★★★★☆ <span style="opacity:.7;">4.6 (520)</span></div>
              <p class="meta">Ubud spa • Waterfalls • Nusa Penida day trip • Temple tour</p>
              <div class="chips">
                <span class="chip">Resort</span><span class="chip">Activities</span><span class="chip">Transfers</span>
              </div>
              <div class="bottom">
                <div class="price">₹82,000 <small>per person</small></div>
                <button class="cta" aria-label="Book Bali wellness">Book Now</button>
              </div>
            </div>
          </article>
        </div>

</div>

<div class="swiper-button-prev" aria-label="Previous slide"></div>
      <div class="swiper-button-next" aria-label="Next slide"></div>
      <div class="swiper-pagination"></div>
    </div>
  </section>

<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
 
</body>
</html>

CSS

:root{
      --bg-1:#0f172a;        /* slate-900 */
      --bg-2:#111827;        /* gray-900  */
      --card:#ffffff;
      --soft:#e5e7eb;        /* gray-200 */
      --accent:#ff7e5f;
      --accent-2:#feb47b;
      --success:#16a34a;
    }

/* Animated gradient backdrop */
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Poppins", Segoe UI, Roboto, Arial, sans-serif;
      color:#fff;
      background: radial-gradient(1200px 600px at 15% 10%, #1f2937 0%, transparent 60%),
                  radial-gradient(1200px 600px at 85% 90%, #0b3b5c 0%, transparent 60%),
                  linear-gradient(135deg, var(--bg-1), var(--bg-2));
      min-height:100vh;
    }

.section{
      padding:60px 0 80px;
      position:relative;
      overflow:hidden;
    }

.header{
      text-align:center;
      margin-bottom:28px;
    }
    .title{
      font-size: clamp(28px, 4vw, 44px);
      font-weight:800;
      letter-spacing:.4px;
      margin:0 0 8px;
    }
    .subtitle{
      opacity:.8;
      margin:0 auto;
      max-width:720px;
      line-height:1.5;
    }

/* Swiper sizing */
    .swiper{
      width: min(1250px, 92vw);
      padding: 30px 12px 70px;
    }

/* Card */
    .trip-card{
      position:relative;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      border-radius:18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      overflow:hidden;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .trip-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 30px 80px rgba(0,0,0,.5);
    }

.media{
      position:relative;
      aspect-ratio: 16/10;
      overflow:hidden;
    }
    .media img{
      width:100%; height:100%; object-fit:cover; display:block;
      transform: scale(1.04);
      transition: transform 1.2s ease;
    }
    .trip-card:hover .media img{ transform: scale(1.08); }

.badge{
      position:absolute; top:12px; left:12px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#111; font-weight:800; font-size:12px;
      padding:6px 10px; border-radius:999px;
      letter-spacing:.3px;
    }

.content{
      padding:18px 18px 20px;
      color:#e5e7eb;
    }
    .place{
      font-size:18px; font-weight:700; color:#fff; margin:0 0 6px;
    }
    .meta{
      font-size:14px; opacity:.85; margin:0 0 12px;
    }
    .chips{
      display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px;
    }
    .chip{
      font-size:12px; color:#0f172a; font-weight:700;
      background:#fff; border:1px solid #e5e7eb; border-radius:999px;
      padding:6px 10px;
    }

.bottom{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; margin-top:6px;
    }
    .price{
      font-weight:800; font-size:18px; color:#fff;
    }
    .price small{ display:block; font-weight:600; opacity:.75; font-size:12px; }
    .cta{
      border:none; cursor:pointer; padding:10px 16px; border-radius:12px;
      color:#111; font-weight:900; letter-spacing:.2px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      transition: transform .2s ease;
    }
    .cta:hover{ transform: translateY(-2px); }

/* Swiper controls */
    .swiper-button-next, .swiper-button-prev{
      color:#fff; --swiper-navigation-size: 26px;
      background: rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(8px);
      width:46px; height:46px; border-radius:50%;
    }
    .swiper-button-next:hover, .swiper-button-prev:hover{
      background: rgba(255,255,255,.18);
    }
    .swiper-pagination-bullet{ background:#ffffff80; }
    .swiper-pagination-bullet-active{ background:#fff; }

/* Ratings */
    .stars{
      color:#ffd166; letter-spacing:1px; font-size:14px; margin-bottom:10px;
    }

@media (max-width: 640px){
      .content{ padding:14px 14px 16px; }
      .chips{ gap:6px; }
      .chip{ padding:5px 8px; }
    }

JavaScript

const swiper = new Swiper(".mySwiper", {
      loop: true,
      grabCursor: true,
      centeredSlides: true,
      speed: 700,
      effect: "coverflow",
      coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 160,
        modifier: 1.2,
        slideShadows: false
      },
      slidesPerView: 1.15,
      spaceBetween: 18,
      lazy: { loadPrevNext: true, loadOnTransitionStart: true },
      autoplay: { delay: 3200, disableOnInteraction: false },
      keyboard: { enabled: true },
      mousewheel: { forceToAxis: true, sensitivity: 0.6 },
      pagination: { el: ".swiper-pagination", clickable: true },
      navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
      breakpoints: {
        640:  { slidesPerView: 1.25, spaceBetween: 20 },
        768:  { slidesPerView: 2,     spaceBetween: 22 },
        1024: { slidesPerView: 2.6,   spaceBetween: 24 },
        1280: { slidesPerView: 3,     spaceBetween: 26 }
      }
    });

// Pause on hover
    const container = document.querySelector(".mySwiper");
    container.addEventListener("mouseenter", () => swiper.autoplay.stop());
    container.addEventListener("mouseleave", () => swiper.autoplay.start());

Premium Travel Packages Slider Preview

Download Options