All Patterns

Carousel Chronicle

A showcase carousel with center-focused slides, blur effects on inactive slides, and dynamic captions. Perfect for portfolios, case studies, or feature highlights.

Section Data Attributes

Set these on the .carousel-chronicle section element:

Attribute	Default	Description
`data-speed`	5000	Auto-advance interval in milliseconds
`data-autoplay`	false	Enable automatic slide advancement
`data-pause-hover`	true	Pause autoplay when hovering

Slide Data Attributes

Set these on each .carousel-chronicle__slide element:

Attribute	Description
`data-title`	Title shown in caption area
`data-link`	URL for the caption link
`data-icon`	Icon URL (SVG recommended)

Features

Infinite loop navigation (wraps at ends)
Click any slide to focus it
Keyboard navigation (Arrow Left/Right)
Touch/swipe support on mobile
Caption updates automatically based on active slide
CSS blur effect on inactive slides
Edge fade gradients for depth

Accessibility

Keyboard navigable with arrow keys
Proper aria-labels on navigation buttons
Focus visible states on buttons