Responsive Product: Slider Html Css Codepen Work

.product-track 
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
.product-card 
  flex: 0 0 calc(100% - 20px);
  scroll-snap-align: start;
@media (min-width: 640px) 
  .product-card  flex-basis: calc(50% - 20px);
@media (min-width: 1024px) 
  .product-card  flex-basis: calc(33.333% - 20px);

This paper has outlined a clean, responsive product slider built with HTML, CSS, and vanilla JavaScript, suitable for direct integration into any modern web project. The CodePen-based demonstration provides an interactive, editable reference for developers. Future extensions could include dynamic data fetching (JSON → card generation), touch drag-and-drop, or integration with a shopping cart state. Nonetheless, the presented core serves as a robust, lightweight foundation.

<div class="slider-container">
  <button class="slider-btn prev">❮</button>
  <div class="product-track" id="productTrack">
    <div class="product-card">...</div>
    <!-- repeat 6+ cards -->
  </div>
  <button class="slider-btn next">❯</button>
</div>

Add these CSS rules to make the dots functional and pretty:

.dots-container 
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
.dot 
width: 10px;
height: 10px;
border-radius: 50%;
background: #cbd5e1;
border: none;
cursor: pointer;
transition: all 0.2s;
padding: 0;

.dot.active 
background: #3b82f6;
width: 24px;
border-radius: 1rem;
 responsive product slider html css codepen work
.dot:hover 
background: #64748b;

The code above uses a fixed width (width: 260px) for the slides. This is intentional for a slider. This paper has outlined a clean, responsive product

If you want the cards to resize based on the screen (getting larger on desktop), you can change the slide width to a percentage or use clamp():

/* Example for fluid sizing */
.slide 
  width: 80%; /* Takes up 80% of container on mobile */
@media (min-width: 768px) 
.slide 
width: 40%; /* Takes up less space on tablet */

1. HTML

<div class="slider-container">
  <header class="slider-header">
    <h2>Trending Now</h2>
    <div class="slider-nav">
      <button class="nav-btn prev" onclick="scrollSlider(-1)">←</button>
      <button class="nav-btn next" onclick="scrollSlider(1)">→</button>
    </div>
  </header>
<div class="slider" id="productSlider">
    <!-- Product Card 1 -->
    <article class="product-card">
      <div class="product-image">
        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400" alt="Smart Watch">
        <span class="badge">New</span>
      </div>
      <div class="product-info">
        <h3>Minimal Smart Watch</h3>
        <p class="price">$249.00</p>
      </div>
    </article>
<!-- Product Card 2 -->
    <article class="product-card">
      <div class="product-image">
        <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=400" alt="Perfume">
        <span class="badge sale">Sale</span>
      </div>
      <div class="product-info">
        <h3>Rose Gold Perfume</h3>
        <p class="price"><span class="old-price">$120.00</span> $89.00</p>
      </div>
    </article>
<!-- Product Card 3 -->
    <article class="product-card">
      <div class="product-image">
        <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=400" alt="Camera">
      </div>
      <div class="product-info">
        <h3>Vintage Polaroid Camera</h3>
        <p class="price">$199.00</p>
      </div>
    </article>
<!-- Product Card 4 -->
    <article class="product-card">
      <div class="product-image">
        <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=400" alt="Sunglasses">
      </div>
      <div class="product-info">
        <h3>Classic Sunglasses</h3>
        <p class="price">$75.00</p>
      </div>
    </article>
<!-- Product Card 5 -->
    <article class="product-card">
      <div class="product-image">
        <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?w=400" alt="Headphones">
        <span class="badge">Hot</span>
      </div>
      <div class="product-info">
        <h3>Wireless Headphones</h3>
        <p class="price">$350.00</p>
      </div>
    </article>
  </div>
</div>

2. CSS (SCSS or standard CSS)

/* --- Base Setup --- */
body 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  padding: 2rem;
.slider-container 
  width: 100%;
  max-width: 1200px;
/* --- Header & Navigation --- */
.slider-header 
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
h2 
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
.slider-nav 
  display: flex;
  gap: 0.5rem;
.nav-btn 
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 1.2rem;
  color: #333;
&:hover 
    background: #333;
    color: white;
    border-color: #333;
/* --- The Slider --- */
.slider 
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px; /* Card Width */
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
/* Hide Scrollbar for clean look */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
&::-webkit-scrollbar 
    display: none; /* Chrome, Safari, Opera */
/* --- Product Card Design --- */
.product-card 
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  scroll-snap-align: start;
  transition: transform 0.3s ease;
  cursor: pointer;
&:hover 
    transform: translateY(-5px);
.product-image img 
      transform: scale(1.05);
.product-image 
  position: relative;
  height: 280px;
  overflow: hidden;
  background: #fff;
img 
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
.badge 
  position: absolute;
  top: 15px;
  left: 15px;
  background: #333;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
&.sale 
    background: #ff4d4d;
.product-info 
  padding: 1.25rem;
h3 
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: #222;
    font-weight: 600;
.price 
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    margin: 0;
.old-price 
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    font-size: 0.9rem;
    margin-right: 0.5rem;
/* --- Responsive Design --- */
@media (max-width: 768px) 
  .slider-header h2 
    font-size: 1.4rem;
.slider 
    grid-auto-columns: 220px; /* Narrower cards on mobile */
    gap: 1rem;
.product-image 
    height: 200px;

3. JavaScript

const slider = document.getElementById('productSlider');
function scrollSlider(direction) 
  const scrollAmount = 300; // Adjust scroll distance
  slider.scrollBy(
    left: scrollAmount * direction,
    behavior: 'smooth'
  );

Key CSS features employed: