TickerSlideshow

Ticker changes into slideshow on mobile

Ticker Slideshow Intelligently switches between two display modes based on viewport width, giving you the best experience on every device. Desktop Mode (Ticker) Infinite horizontal scroll with smooth CSS animations Configurable speed and direction (left or right) Pause on hover option for better user control Automatically duplicates content for seamless looping Adjustable gap between cards Mobile Mode (Slideshow) Touch-enabled swipe gestures with velocity detection Pill-style dot navigation for quick access Auto-play with configurable intervals Three sizing options: Fill (stretch to frame), Fixed (canvas size), or Fit (content width) Smooth snap animations with infinite loop support Accessibility Features Full keyboard navigation (arrow keys) ARIA live regions for screen readers Semantic HTML with proper roles Respects prefers-reduced-motion settings Focus management for interactive elements Customization Options Adjustable breakpoint (when to switch between modes) Configurable gaps for both ticker and slideshow Custom active dot color Speed and interval controls Pause behavior settings Use Cases Logo carousels and partner showcases Customer testimonials and reviews Product feature highlights Social media feed displays Image galleries and portfolios Promotional banners The component handles edge cases gracefully, including single items, empty states, and rapid user interactions. It uses performance-optimized CSS transforms and includes proper cleanup to prevent memory leaks.

Ticker changes into slideshow on mobile