Travel Slider | QuickCoder | The frontend studio

HTML

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

</head>

<body>

<section class="section">
  <div class="heading">
    <h2>Explore <span>Dream Destinations</span></h2>
    <p>Handpicked travel packages for unforgettable journeys</p>
  </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=900&q=80">
        <div class="info">
          <h3>Manali</h3>
          <p>Snow, mountains & adventure</p>
          <div class="price">₹12,999</div>
          <a class="btn">Book Now</a>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80">
        <div class="info">
          <h3>Goa</h3>
          <p>Beaches, nightlife & chill</p>
          <div class="price">₹9,999</div>
          <a class="btn">Book Now</a>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1548013146-72479768bada?auto=format&fit=crop&w=900&q=80">
        <div class="info">
          <h3>Dubai</h3>
          <p>Luxury & skyline vibes</p>
          <div class="price">₹39,999</div>
          <a class="btn">Book Now</a>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80">
        <div class="info">
          <h3>Kerala</h3>
          <p>Backwaters & nature</p>
          <div class="price">₹14,499</div>
          <a class="btn">Book Now</a>
        </div>
      </div>

</div>

</div>
</section>

</body>
</html>

CSS

:root{
  --primary:#6a00ff;
  --secondary:#00c6ff;
  --dark:#0b0b1f;
  --light:#ffffff;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Poppins, system-ui;
}

body{
  background:linear-gradient(120deg,#0b0b1f,#12002b);
  color:#fff;
  overflow-x:hidden;
}

/* SECTION */
.section{
  padding:90px 6%;
}

.heading{
  text-align:center;
  margin-bottom:60px;
  animation:fadeDown 1s ease;
}

.heading h2{
  font-size:42px;
  font-weight:800;
}

.heading span{
  background:linear-gradient(45deg,var(--secondary),var(--primary));
  -webkit-background-clip:text;
  color:transparent;
}

.heading p{
  margin-top:12px;
  opacity:.8;
}

/* SLIDER */
.slider-wrap{
  position:relative;
}

.slider{
  display:flex;
  gap:35px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:30px;
}

.slider::-webkit-scrollbar{
  height:6px;
}
.slider::-webkit-scrollbar-thumb{
  background:linear-gradient(45deg,var(--secondary),var(--primary));
  border-radius:10px;
}

/* CARD */
.card{
  min-width:340px;
  height:460px;
  border-radius:26px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  animation:fadeUp 1.2s ease;
}

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:1s;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
}

.card:hover img{
  transform:scale(1.15);
}

/* CONTENT */
.info{
  position:absolute;
  bottom:0;
  padding:30px;
  z-index:2;
  transform:translateY(60px);
  transition:.6s;
}

.card:hover .info{
  transform:translateY(0);
}

.info h3{
  font-size:26px;
  margin-bottom:8px;
}

.info p{
  font-size:14px;
  opacity:.85;
  margin-bottom:15px;
}

.price{
  font-size:22px;
  font-weight:700;
  margin-bottom:18px;
  color:#00e5ff;
}

.btn{
  display:inline-block;
  padding:12px 26px;
  background:linear-gradient(45deg,var(--secondary),var(--primary));
  border-radius:30px;
  text-decoration:none;
  color:#fff;
  font-weight:600;
}

/* ARROWS */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(45deg,var(--secondary),var(--primary));
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}

.arrow svg{
  width:22px;
  fill:#fff;
}

.arrow.left{ left:-25px; }
.arrow.right{ right:-25px; }

/* ANIMATIONS */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(60px); }
  to{ opacity:1; transform:none; }
}

@keyframes fadeDown{
  from{ opacity:0; transform:translateY(-40px); }
  to{ opacity:1; transform:none; }
}

/* MOBILE */
@media(max-width:768px){
  .heading h2{ font-size:30px; }
  .card{ min-width:260px; height:380px; }
  .arrow{ display:none; }
}

JavaScript

Travel Slider Preview

Download Options