All Patterns

Carousel Chronicle

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