<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;
}