Design Patterns
Slider Design Patterns
A curated collection of slider and carousel patterns for showcasing recipes, products, and content in Meridian interfaces.
Horizontal Scroll Cards
Native CSS scroll-snap with overflow-x-auto. Ideal for recipe cards on mobile-first layouts. No JavaScript required.
Breakfast
Lunch
Dinner
Dessert
Snacks
Dot Indicator Carousel
Single-card reveal with dot navigation. Works well for featured recipes or hero sections.
Featured Recipe
Thumbnail Strip Slider
Large preview with a row of thumbnails below. Perfect for step-by-step recipe instructions.
Main Preview
1
2
3
4
5
Pro tip: Combine scroll-snap with CSS scroll-driven animations for progress indicators. Keep sliders under 6 items for optimal engagement.