Garments Product Slider | QuickCoder

HTML

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

</head>

<body>

<section class="section">
  <div class="title">
    <h2>Trending <span>Garments</span></h2>
    <p>Premium fashion collection for modern brands</p>
  </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1520975916090-3105956dac38?auto=format&fit=crop&w=800&q=80">
        <div class="card-body">
          <h3>Men Purple Hoodie</h3>
          <p>Premium cotton winter wear</p>
          <div class="price">₹1,499</div>
          <a class="btn">Add to Cart</a>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1542060748-10c28b62716f?auto=format&fit=crop&w=800&q=80">
        <div class="card-body">
          <h3>Women Casual Top</h3>
          <p>Stylish daily wear fashion</p>
          <div class="price">₹999</div>
          <a class="btn">Add to Cart</a>
        </div>
      </div>

<div class="card">
        <img src="https://plus.unsplash.com/premium_photo-1671030274122-b6ac34f87b8b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8amFja2V0fGVufDB8fDB8fHww">
        <div class="card-body">
          <h3>Designer Jacket</h3>
          <p>Trendy street style outfit</p>
          <div class="price">₹2,199</div>
          <a class="btn">Add to Cart</a>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2xvdGhpbmd8ZW58MHx8MHx8fDA%3D">
        <div class="card-body">
          <h3>Fashion T-Shirt</h3>
          <p>Soft fabric premium tee</p>
          <div class="price">₹799</div>
          <a class="btn">Add to Cart</a>
        </div>
      </div>

</div>

</div>
</section>

</body>
</html>

CSS

:root{
  --purple:#7b2cbf;
  --purple-dark:#5a189a;
  --bg:#f6f4fb;
  --text:#222;
  --muted:#666;
}

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

body{
  background:var(--bg);
}

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

.title{
  text-align:center;
  margin-bottom:50px;
}

.title h2{
  font-size:38px;
  font-weight:700;
  color:var(--text);
}

.title span{
  color:var(--purple);
}

.title p{
  margin-top:10px;
  color:var(--muted);
}

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

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

.slider::-webkit-scrollbar{
  height:6px;
}
.slider::-webkit-scrollbar-thumb{
  background:var(--purple);
  border-radius:10px;
}

/* CARD */
.card{
  min-width:300px;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
  transition:.4s;
}

.card:hover{
  transform:translateY(-12px);
}

/* IMAGE */
.card img{
  width:100%;
  height:340px;
  object-fit:cover;
}

/* CONTENT */
.card-body{
  padding:22px;
}

.card-body h3{
  font-size:20px;
  margin-bottom:6px;
}

.card-body p{
  font-size:14px;
  color:var(--muted);
  margin-bottom:14px;
}

.price{
  font-size:22px;
  font-weight:700;
  margin-bottom:18px;
  color:var(--purple-dark);
}

/* BUTTON */
.btn{
  display:inline-block;
  padding:12px 26px;
  background:var(--purple);
  color:#fff;
  text-decoration:none;
  border-radius:30px;
  font-weight:600;
  transition:.3s;
}

.btn:hover{
  background:var(--purple-dark);
}

/* ARROWS */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  background:var(--purple);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

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

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

/* MOBILE */
@media(max-width:768px){
  .title h2{ font-size:28px; }
  .card{ min-width:240px; }
  .card img{ height:280px; }
  .arrow{ display:none; }
}

JavaScript

Garments Product Slider Preview

Download Options