Product Slider

• Overview
• When to Use Product Sliders
• Slider Patterns
• Product Display
• Navigation Controls
• Mobile Sliders
• Performance
• Checklist

Overview

Product slider (carousel) displays multiple products horizontally with navigation to scroll through them. Used for related products, recently viewed, bestsellers, and featured products.

Assumed knowledge: AI agents know how to build carousels with navigation. This focuses on ecommerce product slider patterns.

Key requirements:

• Horizontal scrolling of product cards
• Arrow navigation (prev/next)
• Optional dot indicators
• Mobile: Swipe gesture support
• Responsive product count (4-6 visible desktop, 2-3 mobile)
• Lazy loading for off-screen products

When to Use Product Sliders

Use for:

• Related products (product page)
• Recently viewed (product page, homepage)
• “You May Also Like” (product page)
• Bestsellers / Featured products (homepage)
• “Frequently Bought Together” (product page)
• New arrivals (homepage)
• Category showcases (homepage)

Don’t use for:

• Main product images (use gallery instead)
• Critical content (not all users scroll/swipe)
• Checkout flow (keep linear)
• Primary navigation (use grid for discoverability)

Slider Patterns

Continuous scroll:

• Shows 4-6 products at once (desktop)
• Scroll left/right by 1-2 products at a time
• Smooth animated transition (300-400ms)
• Most common pattern

Infinite loop (optional):

• Wraps to beginning after end
• Good for small product sets (<10 items)
• Creates continuous browsing feel
• Not necessary for large sets

Snap to alignment:

• Products snap to grid after scroll
• Prevents partial product visibility
• Better visual alignment
• Improves browsing experience

Auto-play (NOT recommended for products):

• Automatic scrolling without user action
• Poor UX for product sliders (users lose control)
• Only use for promotional banners/hero images
• If using: Pause on hover, slow speed (5-7s)

Product Display

Product cards in sliders:

• Same cards as product grids (see product-card.md)
• Simplified on mobile (less detail, smaller images)
• Image, title, price minimum
• Optional: Rating, “Add to Cart” (desktop only)
• Adequate spacing between cards (16-24px)

Responsive display:

• Large desktop (>1440px): 5-6 products visible
• Desktop (1024-1440px): 4-5 products
• Tablet (768-1024px): 3-4 products
• Mobile (<768px): 2 products (sometimes 1.5 for scroll hint)

Scroll hint on mobile:

• Show 1.5 products (partial visibility of next)
• Indicates more content to swipe
• Improves discoverability
• Better than showing exact 2 products

Navigation Controls

Arrow buttons:

• Left/right arrows outside slider
• Desktop: Always visible or show on hover
• Mobile: Hidden (swipe gesture preferred)
• Position: Vertically centered
• Size: 40-48px touch targets
• Disable left arrow at start, right arrow at end (no infinite loop)

Dot indicators (optional):

• Show progress through slider
• Each dot = one “page” of products
• Position: Below slider, centered
• Small (8-12px dots)
• Only if many products (>12)
• Less common for product sliders (more for hero carousels)

Keyboard navigation:

• Tab through visible product cards
• Arrow keys scroll slider (optional)
• Focus management on scroll

Mobile Sliders

Touch gestures:

• Horizontal swipe to scroll
• Native scroll momentum
• Snap to product alignment
• No arrow buttons (swipe is intuitive)

Mobile-specific adjustments:

• 2 products visible (or 1.5 for hint)
• Larger touch targets on products
• Remove hover-only features (Quick View)
• Faster scroll animations (200-300ms)

Performance on mobile:

• Lazy load off-screen products
• Smaller image sizes
• Limit initial products loaded (8-10)
• Load more on scroll

Performance

Lazy loading (critical):

• Only load visible products initially
• Load adjacent products (left/right) on demand
• Significantly improves page load time
• Use Intersection Observer API

Image optimization:

• Responsive images (smaller for mobile)
• WebP format with fallback
• Lazy load off-screen images
• Optimized thumbnails (<300KB)

Limit slider length:

• Max 20-30 products per slider
• “View All” link to full category page
• Improves performance
• Prevents endless scrolling

Checklist

Essential features:

• Not done: 4-6 products visible (desktop), 2 (mobile)
• Not done: Arrow navigation (desktop)
• Not done: Swipe gesture (mobile)
• Not done: Product cards with image, title, price
• Not done: Responsive product count
• Not done: Smooth scroll transitions (300-400ms)
• Not done: Snap to product alignment
• Not done: Lazy load off-screen products
• Not done: “View All” link if many products (>20)
• Not done: Disable arrows at start/end
• Not done: Keyboard accessible (Tab through products)
• Not done: Mobile: No arrows, swipe only
• Not done: Optimized images (<300KB)
• Not done: Spacing between products (16-24px)
• Not done: ARIA labels on navigation (aria-label="Previous products")
• Not done: role="region" on slider container
• Not done: NO auto-play for product sliders