Multi-Card Product Carousel CSS (Code Snippet)

<div class="product-slider">
  <div class="p-card">
    <div class="p-image" style="background:#3b82f6"></div>
    <h4>Product 1</h4>
    <span>$49.00</span>
  </div>
  <div class="p-card">
    <div class="p-image" style="background:#ec4899"></div>
    <h4>Product 2</h4>
    <span>$59.00</span>
  </div>
  <div class="p-card">
    <div class="p-image" style="background:#10b981"></div>
    <h4>Product 3</h4>
    <span>$29.00</span>
  </div>
  <div class="p-card">
    <div class="p-image" style="background:#f59e0b"></div>
    <h4>Product 4</h4>
    <span>$89.00</span>
  </div>
  <div class="p-card">
    <div class="p-image" style="background:#8b5cf6"></div>
    <h4>Product 5</h4>
    <span>$39.00</span>
  </div>
</div>

.product-slider {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* Hide scrollbar */
.product-slider::-webkit-scrollbar {
  height: 6px;
}
.product-slider::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}
.p-card {
  flex: 0 0 200px;
  background: #fff;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid #f3f4f6;
  scroll-snap-align: start;
  text-align: center;
  transition: transform 0.2s;
}
.p-card:hover {
  transform: translateY(-5px);
}
.p-image {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  margin-bottom: 15px;
}
.p-card h4 {
  margin: 0 0 5px 0;
  color: #1f2937;
  font-size: 1rem;
}
.p-card span {
  color: #3b82f6;
  font-weight: 700;
}

Multi-Card Product Carousel CSS

Share Code Snippet