Codepen Work [new] | Responsive Product Slider Html Css
To create a responsive product slider with a "paper" or card-like aesthetic using only HTML and CSS, you can utilize CSS Flexbox for layout and Scroll Snap for the sliding functionality. This approach is lightweight and works natively in modern browsers without needing heavy JavaScript libraries. Core Features
Paper Aesthetic: Uses subtle shadows, rounded corners, and white backgrounds to mimic the look of physical cards on a flat surface.
CSS Scroll Snap: Ensures that when a user swipes or scrolls, the slider "snaps" perfectly to the next product card.
Responsive: Automatically adjusts the number of visible cards or their width based on the screen size. Implementation Guide
Structure (HTML): Create a container for the slider and individual article or div elements for each product "paper" card. Layout (CSS): Set the container to display: flex and overflow-x: auto. Apply scroll-snap-type: x mandatory to the container.
Apply scroll-snap-align: start (or center) to the individual cards.
Styling: Use box-shadow and border-radius to achieve the "paper" effect.
For interactive examples and boilerplate code, you can explore community-made "Pens" on CodePen like this Product Card Slider which demonstrates the scroll-snap technique. Detailed documentation on creating these layouts is also available on GeeksforGeeks. Visual Style Properties
To get that specific "paper" look, focus on these CSS properties: background: #ffffff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 1.5rem; 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>
Creating a responsive product slider from scratch is a great way to practice CSS Flexbox or CSS Grid alongside basic JavaScript for navigation.
Below is a clean, modern template you can use. This version uses a "scroll-snap" approach, which is the most performance-efficient way to build sliders today because it leverages the browser's native scrolling [1, 2]. 1. HTML Structure
We’ll use a container for the slider and a series of "cards" for the products.
Step 4: Add Dot Navigation Styles
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;
.dot:hover
background: #64748b;
References
- MDN Web Docs. (2024). "Scroll Snap CSS." Mozilla.
- CodePen (2024). "Embedding Pens." CodePen Blog.
- W3C. (2023). "CSS Overflow Module Level 3."
- Google Web Fundamentals. (2023). "Performance and Carousels."
Appendix: Full Source Code
(Available for copy-paste on the next page or via the provided CodePen URL.)
Building a High-Performance Responsive Product Slider A responsive product slider is a fundamental component for modern e-commerce, allowing users to browse items seamlessly across devices. By combining HTML for structure, CSS for layout, and occasionally JavaScript for interactivity, you can create a high-performance experience that works perfectly on both desktop and touch-enabled screens. 1. Essential Structure with HTML
The foundation of any slider is a clean HTML hierarchy. You typically need a main container to define the viewing area, a wrapper to hold the long strip of items, and individual slide elements for each product. Slider Container
: Acts as the "window" through which users see the products. Slider Wrapper : Holds all products in a single row. Product Items : Each contains a product image, title, and price. 2. Styling for Responsiveness with CSS
CSS transforms your list of products into a functional carousel. Modern techniques like are preferred for their flexibility.
How to Build a Responsive Image Slider for Your Website | by Soha 12 May 2023 —
Creating a sleek, functional product slider is a rite of passage for web developers. Whether you're building an e-commerce giant or a boutique portfolio, a responsive product slider ensures your items look great on everything from a giant desktop monitor to a slim smartphone.
In this guide, we’ll break down how to build a high-performance slider using only HTML and CSS, and we'll provide a structure that is "CodePen ready" so you can drop it in and start experimenting immediately. Why Build a "Pure CSS" Slider?
While JavaScript libraries like Slick or Swiper are powerful, they often come with heavy file sizes. A CSS-based slider is: Blazing Fast: No external scripts to load. To create a responsive product slider with a
SEO Friendly: Search engines can easily crawl the list items.
Battery Efficient: Less processing power is required for mobile users. 1. The HTML Structure
We start with a semantic container. We use an unordered list (
) because, fundamentally, a slider is a list of products.
