Responsive Product Slider Html Css Codepen Work
If you'd like, I can:
<!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()
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) =>
"Item";
showToast(productName);
// optional micro interaction: animate button
btn.style.transform = 'scale(0.96)';
setTimeout(() => btn.style.transform = ''; , 150);
);
);
// ----- 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>
Below is a concise, practical blog-style guide you can use or publish that walks through building a responsive product slider using only HTML and CSS (no JavaScript), suitable for a CodePen demo. It includes the HTML structure, CSS (with responsive behavior and accessibility tips), and suggestions for enhancements.
:root
--gap: 1rem;
--card-bg: #fff;
--accent: #1f6feb;
--control-size: 10px;
/* basic reset */
*box-sizing:border-box
imgdisplay:block;width:100%;height:auto;object-fit:cover
/* slider container */
.product-slider
max-width:1100px;
margin:2rem auto;
padding:0 1rem;
position:relative;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
/* slides area: horizontally laid out slides */
.slides
display:flex;
gap:var(--gap);
transition:transform .45s cubic-bezier(.22,.9,.2,1);
scroll-snap-type:x mandatory;
overflow:hidden;
padding-bottom:0.5rem;
/* each slide takes full viewport on small screens, fraction on large */
.slide
min-width:100%;
scroll-snap-align:center;
/* product card visuals */
.product-card
background:var(--card-bg);
border-radius:10px;
overflow:hidden;
box-shadow:0 6px 18px rgba(10,20,40,.08);
/* media: maintain aspect ratio */
.product-media
aspect-ratio: 4 / 3;
background:#eee;
margin:0;
/* info area */
.product-info
padding:0.9rem 1rem;
.product-titlefont-size:1.05rem;margin:0 0 .25rem
.product-descfont-size:.9rem;color:#555;margin:0 0 .5rem
.product-pricefont-weight:700;color:var(--accent)
/* controls (dots) */
.controls
display:flex;
gap:.5rem;
justify-content:center;
margin-top:.9rem;
.controls label
width:var(--control-size);
height:var(--control-size);
border-radius:50%;
background:#cfcfcf;
display:inline-block;
cursor:pointer;
outline: none;
.controls label:focusbox-shadow:0 0 0 3px rgba(31,111,235,.18)
/* radio -> slide transform mapping */
#slide-1:checked ~ .slides transform: translateX(0%);
#slide-2:checked ~ .slides transform: translateX(-100%);
#slide-3:checked ~ .slides transform: translateX(-200%);
/* active dot styling */
#slide-1:checked ~ .controls label[for="slide-1"],
#slide-2:checked ~ .controls label[for="slide-2"],
#slide-3:checked ~ .controls label[for="slide-3"]
background:var(--accent);
/* responsive: show 2 columns on medium, 3 on wide screens */
@media (min-width:720px)
.slide min-width:50%; /* two slides visible */
#slide-2:checked ~ .slides transform: translateX(-50%);
#slide-3:checked ~ .slides transform: translateX(-100%);
@media (min-width:1100px)
.slide min-width:33.3333%; /* three visible */
#slide-2:checked ~ .slides transform: translateX(-33.3333%);
#slide-3:checked ~ .slides transform: translateX(-66.6666%);
To create a responsive product slider for your CodePen work, you can use either a library like for robust features or pure CSS/JavaScript for a lightweight custom build 1. Popular Framework-Based Approach (SwiperJS)
Using a library is often the most reliable way to handle touch support and complex responsiveness. : Include the SwiperJS CDN links for CSS and JS in your CodePen settings. HTML Structure "swiper-container" "swiper-wrapper" "swiper-slide" "swiper-slide" "swiper-button-next" "swiper-button-prev" Use code with caution. Copied to clipboard Responsive Breakpoints
: Define how many slides show at different screen sizes using the breakpoints property in JavaScript. javascript '.swiper-container' , { slidesPerView: , breakpoints: { : { slidesPerView: : --------------); 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 responsive product slider html css codepen work
: 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?
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 If you'd like, I can:
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. Below is a concise, practical blog-style guide you
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;
<section class="product-slider" aria-label="Featured products">
<!-- navigation radios -->
<input type="radio" name="slide" id="slide-1" checked hidden>
<input type="radio" name="slide" id="slide-2" hidden>
<input type="radio" name="slide" id="slide-3" hidden>
<!-- slides wrapper -->
<div class="slides">
<div class="slide">
<article class="product-card">
<figure class="product-media">
<img src="https://picsum.photos/600/400?image=101" alt="Product 1">
</figure>
<div class="product-info">
<h3 class="product-title">Product One</h3>
<p class="product-desc">Short description goes here.</p>
<div class="product-price">$39.00</div>
</div>
</article>
</div>
<div class="slide">
<article class="product-card">
<figure class="product-media">
<img src="https://picsum.photos/600/400?image=102" alt="Product 2">
</figure>
<div class="product-info">
<h3 class="product-title">Product Two</h3>
<p class="product-desc">Short description goes here.</p>
<div class="product-price">$49.00</div>
</div>
</article>
</div>
<div class="slide">
<article class="product-card">
<figure class="product-media">
<img src="https://picsum.photos/600/400?image=103" alt="Product 3">
</figure>
<div class="product-info">
<h3 class="product-title">Product Three</h3>
<p class="product-desc">Short description goes here.</p>
<div class="product-price">$59.00</div>
</div>
</article>
</div>
</div>
<!-- controls -->
<div class="controls" role="tablist" aria-label="Slides">
<label for="slide-1" role="tab" aria-controls="slide-1" tabindex="0"></label>
<label for="slide-2" role="tab" aria-controls="slide-2" tabindex="0"></label>
<label for="slide-3" role="tab" aria-controls="slide-3" tabindex="0"></label>
</div>
</section>
“this is alas just another film that panders to the image Thompson himself tried to shirk – the reckless buffoon that is more at home on fraternity posters than library shelves. It is a missed opportunity to take the man seriously.”
This is an excellent summary on the attitude of the seeming majority of HST ‘admirers’.
It just makes me think that they read Fear and Loathing, looked up similar stories of HST’s unhinged behaviour and didn’t bother with the rest of his work.
There is such a raw, human element of Thompsons work, showing an amazing mind, sense of humour, critical thinking and an uncanny ability to have his finger on the pulse of many issues of his time.
Booze feature prominently in most of his writing and he is always flirting with ‘the edge’, but this obsession with remembering him more as Raoul Duke and less as Hunter Thompson, is a sad reflection of most ‘fans’; even if it was a self inflicted wound by Thompson himself.