Responsive Product Slider Html Css Codepen Work -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Responsive Product Slider | Shoe Showcase</title>
<!-- Google Fonts for modern typography -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700&display=swap" rel="stylesheet">
<!-- Font Awesome 6 (free icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: linear-gradient(145deg, #f6f9fc 0%, #eef2f5 100%);
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1.5rem;
/* main card container */
.slider-container
max-width: 1400px;
width: 100%;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(2px);
border-radius: 3rem;
padding: 2rem 1.8rem 2.5rem 1.8rem;
box-shadow: 0 25px 45px -12px rgba(0,0,0,0.2);
transition: all 0.2s ease;
/* header section */
.shop-header
text-align: center;
margin-bottom: 2.5rem;
.shop-header h1
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(135deg, #1A2A3F, #2C4C6E);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
.shop-header p
color: #4a627a;
font-weight: 400;
margin-top: 0.5rem;
font-size: 1rem;
.badge
display: inline-block;
background: #eef2ff;
padding: 0.2rem 1rem;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 600;
color: #1f4f6e;
margin-top: 0.8rem;
/* ----- PRODUCT SLIDER (RESPONSIVE CORE) ----- */
.product-slider
position: relative;
width: 100%;
overflow: hidden;
border-radius: 2rem;
.slider-track
display: flex;
gap: 1.8rem;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 1rem 0.5rem 2rem 0.5rem;
/* Hide scrollbar but keep functionality (cleaner UI) */
scrollbar-width: thin;
scrollbar-color: #b9d0e0 #e9edf2;
.slider-track::-webkit-scrollbar
height: 6px;
.slider-track::-webkit-scrollbar-track
background: #e9edf2;
border-radius: 10px;
.slider-track::-webkit-scrollbar-thumb
background: #b9d0e0;
border-radius: 10px;
/* product card */
.product-card
flex: 0 0 280px;
scroll-snap-align: start;
background: white;
border-radius: 1.8rem;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
overflow: hidden;
backdrop-filter: blur(0px);
border: 1px solid rgba(255,255,255,0.5);
.product-card:hover
transform: translateY(-8px);
box-shadow: 0 30px 45px -15px rgba(0, 0, 0, 0.2);
border-color: rgba(100, 150, 200, 0.3);
/* image area with gradient background */
.product-img
background: linear-gradient(125deg, #f1f5f9, #ffffff);
padding: 1.8rem 1rem 1rem 1rem;
text-align: center;
position: relative;
border-bottom: 1px solid #eef2f8;
.product-img img
max-width: 100%;
height: 180px;
object-fit: contain;
transition: transform 0.3s ease;
filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1));
.product-card:hover .product-img img
transform: scale(1.02);
.badge-sale
position: absolute;
top: 1rem;
left: 1rem;
background: #ff6b4a;
color: white;
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.7rem;
border-radius: 30px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
/* product details */
.product-info
padding: 1.2rem 1rem 1.5rem 1rem;
.product-brand
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #6c8dae;
.product-title
font-size: 1.15rem;
font-weight: 700;
margin: 0.35rem 0 0.5rem 0;
color: #1f2f3e;
line-height: 1.3;
.rating
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 0.7rem;
.rating i
font-size: 0.75rem;
color: #ffb83b;
.rating span
font-size: 0.7rem;
color: #5d6f83;
margin-left: 4px;
.price-row
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-bottom: 1rem;
flex-wrap: wrap;
.current-price
font-size: 1.5rem;
font-weight: 800;
color: #1f4f6e;
.old-price
font-size: 0.9rem;
color: #98aec5;
text-decoration: line-through;
.btn-add
background: #1f4f6e;
border: none;
width: 100%;
padding: 0.7rem 0;
border-radius: 2rem;
color: white;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Inter', sans-serif;
.btn-add i
font-size: 0.9rem;
transition: transform 0.2s;
.btn-add:hover
background: #0d3a52;
transform: scale(0.97);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
.btn-add:hover i
transform: translateX(3px);
/* navigation buttons (desktop / tablet friendly) */
.slider-nav
display: flex;
justify-content: flex-end;
gap: 0.8rem;
margin-top: 1rem;
margin-bottom: 0.5rem;
.nav-btn
background: white;
border: 1px solid #cfdfed;
border-radius: 60px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
font-size: 1.2rem;
color: #2c5a7a;
.nav-btn:hover
background: #1f4f6e;
color: white;
border-color: #1f4f6e;
transform: scale(1.02);
/* responsiveness: adjust card size on different screens */
@media (max-width: 780px)
.slider-container
padding: 1.5rem;
.product-card
flex: 0 0 260px;
.product-img img
height: 150px;
.shop-header h1
font-size: 1.8rem;
@media (max-width: 560px)
body
padding: 1rem;
.product-card
flex: 0 0 240px;
.slider-track
gap: 1rem;
.current-price
font-size: 1.3rem;
.nav-btn
width: 38px;
height: 38px;
/* small but smooth */
@media (max-width: 480px)
.product-info
padding: 1rem;
.product-title
font-size: 1rem;
/* optional snackbar / toast for "add to cart" demo */
.toast-msg
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%) scale(0.9);
background: #1f2f3e;
color: white;
padding: 0.7rem 1.4rem;
border-radius: 50px;
font-weight: 500;
font-size: 0.85rem;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
z-index: 1000;
backdrop-filter: blur(8px);
background: rgba(20, 40, 55, 0.9);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
.toast-msg.show
opacity: 1;
transform: translateX(-50%) scale(1);
</style>
</head>
<body>
<div class="slider-container">
<div class="shop-header">
<h1><i class="fas fa-shoe-prints" style="margin-right: 10px; color: #2C4C6E;"></i> stride & sole</h1>
<p>Limited edition sneakers — swipe or click to explore</p>
<div class="badge"><i class="fas fa-arrow-right"></i> New drops • responsive slider • free shipping</div>
</div>
<div class="product-slider">
<div class="slider-track" id="sliderTrack">
<!-- product 1 -->
<div class="product-card">
<div class="product-img">
<span class="badge-sale">🔥 bestseller</span>
<img src="https://cdn-icons-png.flaticon.com/512/219/219597.png" alt="Urban Runner">
</div>
<div class="product-info">
<div class="product-brand">NEO RUN</div>
<div class="product-title">Urban Racer X1</div>
<div class="rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
<span>(4.7k)</span>
</div>
<div class="price-row">
<span class="current-price">$89</span>
<span class="old-price">$129</span>
</div>
<button class="btn-add" data-product="Urban Racer X1"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- product 2 -->
<div class="product-card">
<div class="product-img">
<img src="https://cdn-icons-png.flaticon.com/512/1412/1412395.png" alt="Air Glide">
</div>
<div class="product-info">
<div class="product-brand">AERO STEP</div>
<div class="product-title">Air Glide 3.0</div>
<div class="rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
<span>(2.1k)</span>
</div>
<div class="price-row">
<span class="current-price">$112</span>
<span class="old-price">$149</span>
</div>
<button class="btn-add" data-product="Air Glide 3.0"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- product 3 -->
<div class="product-card">
<div class="product-img">
<span class="badge-sale">-20%</span>
<img src="https://cdn-icons-png.flaticon.com/512/2350/2350502.png" alt="Ventura">
</div>
<div class="product-info">
<div class="product-brand">VENTURA</div>
<div class="product-title">Trail Seeker</div>
<div class="rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
<span>(854)</span>
</div>
<div class="price-row">
<span class="current-price">$74</span>
<span class="old-price">$94</span>
</div>
<button class="btn-add" data-product="Trail Seeker"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- product 4 -->
<div class="product-card">
<div class="product-img">
<img src="https://cdn-icons-png.flaticon.com/512/1400/1400822.png" alt="Retro Court">
</div>
<div class="product-info">
<div class="product-brand">RETRO CORE</div>
<div class="product-title">Classic 84 Low</div>
<div class="rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
<span>(1.2k)</span>
</div>
<div class="price-row">
<span class="current-price">$99</span>
<span class="old-price">$119</span>
</div>
<button class="btn-add" data-product="Classic 84 Low"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- product 5 -->
<div class="product-card">
<div class="product-img">
<img src="https://cdn-icons-png.flaticon.com/512/3938/3938072.png" alt="Fusion Runner">
</div>
<div class="product-info">
<div class="product-brand">FUSION LAB</div>
<div class="product-title">Evo Mesh Runner</div>
<div class="rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
<span>(3k)</span>
</div>
<div class="price-row">
<span class="current-price">$134</span>
<span class="old-price">$169</span>
</div>
<button class="btn-add" data-product="Evo Mesh Runner"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
<!-- product 6 (extra for showcase) -->
<div class="product-card">
<div class="product-img">
<span class="badge-sale">new</span>
<img src="https://cdn-icons-png.flaticon.com/512/1584/1584222.png" alt="Cyber Kicks">
</div>
<div class="product-info">
<div class="product-brand">CYBERWEAR</div>
<div class="product-title">Phantom Shift</div>
<div class="rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
<span>(489)</span>
</div>
<div class="price-row">
<span class="current-price">$159</span>
<span class="old-price">$199</span>
</div>
<button class="btn-add" data-product="Phantom Shift"><i class="fas fa-shopping-cart"></i> Add to cart</button>
</div>
</div>
</div>
<div class="slider-nav">
<button class="nav-btn" id="prevBtn" aria-label="Previous slide"><i class="fas fa-chevron-left"></i></button>
<button class="nav-btn" id="nextBtn" aria-label="Next slide"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
<!-- toast notification -->
<div id="cartToast" class="toast-msg">
<i class="fas fa-check-circle"></i> <span id="toastMessage">Added to cart</span>
</div>
<script>
(function()
// ----- RESPONSIVE SLIDER LOGIC (scroll with next/prev buttons) -----
const track = document.getElementById('sliderTrack');
const prevButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');
// Helper: scroll by card width (dynamic based on current card size)
function getScrollAmount()
if (!track) return 300;
// get first card element width + gap (computed style gap)
const firstCard = track.querySelector('.product-card');
if (!firstCard) return 300;
const cardStyle = getComputedStyle(firstCard);
const cardWidth = firstCard.offsetWidth;
const gap = parseFloat(getComputedStyle(track).gap)
function scrollLeftByAmount()
const amount = getScrollAmount();
track.scrollBy( left: -amount, behavior: 'smooth' );
function scrollRightByAmount()
const amount = getScrollAmount();
track.scrollBy( left: amount, behavior: 'smooth' );
if (prevButton && nextButton && track)
prevButton.addEventListener('click', scrollLeftByAmount);
nextButton.addEventListener('click', scrollRightByAmount);
// optional: enhance touch / keyboard? but already scrolls natively.
// Also for better UX, prevent accidental button spamming? it's fine.
// dynamic resize listener: when window resizes, the scroll amount adapts because getScrollAmount() recalculates.
// but we also want to adjust the scroll snap fine.
// We'll also add a small feature: if user scrolls manually, it's fine.
// ----- PRODUCT ADD TO CART DEMO (interactive story) -----
// Create toast system
const toastEl = document.getElementById('cartToast');
const toastMsgSpan = document.getElementById('toastMessage');
function showToast(productName)
if (!toastEl) return;
toastMsgSpan.innerText = `$productName added to cart ✨`;
toastEl.classList.add('show');
setTimeout(() =>
toastEl.classList.remove('show');
, 2000);
// Attach event listeners to all "Add to cart" buttons
const allAddButtons = document.querySelectorAll('.btn-add');
allAddButtons.forEach(btn =>
// we can get product name from data-product or fallback from title
btn.addEventListener('click', (e) => );
);
// ----- Bonus: responsive check + sliding hint on load (just style) -----
// also make slider more accessible: hide native scrollbar but keep functional — we already styled.
// add a small indicator for swipe hint if needed
function handleSliderHint()
if (track && track.scrollWidth > track.clientWidth)
// optional: show that there's more content via little gradient but not needed.
window.addEventListener('resize', () =>
// minor: ensure scroll position doesn't break layout
if (track)
// fix weird overflow clamp: but nothing heavy
);
handleSliderHint();
// Additionally, we can sync navigation buttons disabling when at edges? (optional but nice)
function updateNavState()
if (!track) return;
const leftRemaining = track.scrollLeft;
const maxScroll = track.scrollWidth - track.clientWidth;
// optional visual feedback but not required for story, just for polish
if (prevButton && nextButton)
if (leftRemaining <= 5)
prevButton.style.opacity = '0.5';
prevButton.style.pointerEvents = 'auto'; // still clickable but softer
else
prevButton.style.opacity = '1';
if (maxScroll - track.scrollLeft <= 5)
nextButton.style.opacity = '0.5';
else
nextButton.style.opacity = '1';
if (track)
track.addEventListener('scroll', () => updateNavState());
window.addEventListener('resize', () => updateNavState());
setTimeout(updateNavState, 100);
// also add manual touch/swipe friendliness: scroll-snap does the job.
// Provide elegant message: for codepen story this is fully responsive
console.log('Responsive product slider ready )();
</script>
</body>
</html>
To create a responsive product slider similar to high-quality examples, you can use CSS Scroll Snap for smooth, native-feeling movement and JavaScript for navigation controls 1. HTML Structure
Create a container for the slider, a wrapper for the products, and navigation buttons. "product-slider" "slider-wrapper" "nav-btn prev" >
< "slider-container" <!-- Product Card 1 --> "product-card" >
< "https://placeholder.com" "Product 1" >
< >Product One</ >
< >
</ <!-- Repeat Product Cards as needed --> >
< "nav-btn next" Use code with caution. Copied to clipboard 2. CSS Styling (Responsive & Smooth) scroll-snap-type to ensure products align perfectly when scrolling.</p>
allows for a horizontal layout that adjusts based on screen size. MDN Web Docs ; margin: ; overflow-x: auto; scroll-snap-type: x mandatory; /* Force snapping to items */ scroll-behavior: smooth; padding: ; scrollbar-width: none; /* Hide scrollbar for Chrome/Safari below */ /* Base width for desktop */
scroll-snap-align: start; background: #fff; border-radius: ; padding: ; box-shadow: /* Responsive adjustment for smaller screens */ (max-width: ) .product-card flex: ;
.nav-btn position: absolute; top: ; transform: translateY( ); background: rgba( ); border: none; cursor: pointer; z-index: ;
#prevBtn left: ; #nextBtn right: Use code with caution. Copied to clipboard 3. JavaScript Navigation
Add simple logic to calculate the scroll distance based on the width of a single product card. javascript slider = document.getElementById( prevBtn = document.getElementById( nextBtn = document.getElementById( );
nextBtn.addEventListener( cardWidth = document.querySelector( '.product-card' ).offsetWidth + // width + gap
slider.scrollLeft += cardWidth; );
prevBtn.addEventListener( cardWidth = document.querySelector( '.product-card' ).offsetWidth + ; slider.scrollLeft -= cardWidth; }); Use code with caution. Copied to clipboard Key Features for Quality Touch Ready : Native scrolling with overflow-x: auto works perfectly on mobile devices. Accessibility : Use semantic tags like to ensure screen readers can navigate the slider. Performance
: Using pure CSS for snapping is more performant than heavy JavaScript libraries. Modern Frameworks
: For advanced features like infinite looping or virtual slides, consider lightweight libraries like to this slider?
Creating a responsive product slider is a staple skill for any modern web developer. By combining HTML for structure, CSS for aesthetics and responsiveness, and a touch of JavaScript or a library like Swiper.js, you can build a high-performance carousel that works flawlessly across devices. Essential Building Blocks for a Product Slider
To build a professional-grade slider, you need three primary layers:
HTML Structure: A parent container (e.g.,
) that holds a wrapper for individual slides.
CSS Styling: Uses Flexbox or Grid to align products and overflow: hidden to mask off-screen content.
JavaScript Interactivity: Handles the "sliding" logic by updating the transform: translateX() value of the slide wrapper. How to Build a Responsive Slider in 3 Steps
While you can build a slider from scratch using vanilla JavaScript, many developers use tools like CodePen to experiment with pre-built libraries for faster implementation. 1. Define the HTML Markup
Start with a semantic structure that includes your product cards and navigation arrows.
Use code with caution. 2. Apply Responsive CSS
To make the slider responsive, use media queries to adjust how many products are visible at once. For example: YouTube·ProgrammingKnowledge
Responsive product sliders are essential for modern e-commerce websites. They showcase featured items beautifully on any screen size.
Here is a complete guide to building a lightweight, responsive product slider using HTML and CSS, ready to drop into your CodePen. 🏗️ The HTML Structure responsive product slider html css codepen work
Keep your markup clean and semantic. We use a container to hold the slider and a track to hold the individual product cards.
Hot 
CSS (Excerpt)
.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);
Development of a Responsive Product Slider: A Front-End Implementation Study
Nike Air Max
$120.00
Wireless Earbuds
$85.00
The CodePen Setup
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'
);
1. Introduction
Product sliders (or carousels) are ubiquitous in modern web design, particularly for e-commerce platforms, allowing users to browse items horizontally within a constrained vertical space. While numerous JavaScript libraries (e.g., Swiper.js, Slick) offer advanced functionality, they often introduce unnecessary overhead. This paper focuses on a vanilla implementation — HTML, CSS, and pure JavaScript — to maintain performance, simplicity, and customizability. The final output is hosted and demonstrated on CodePen, a popular social development environment for front-end prototyping.