Touch-Support und Keyboard-Navigation
Swiper.js und Slick kommen mit Hunderten von Kilobytes und eigenen JavaScript-Ökosystemen. Ein produktionsreifer Carousel-Slider für Hyvä braucht weder das eine noch das andere – Alpine.js reicht aus für Touch, Keyboard, Auto-Play und ARIA.
Inhaltsverzeichnis
- 1. Warum kein Swiper.js auf Hyvä-Seiten
- 2. Carousel-State mit Alpine.js aufbauen
- 3. CSS-Transition statt JavaScript-Animation
- 4. Touch-Swipe mit Pointer Events erkennen
- 5. Tastaturnavigation nach ARIA-Roving-Tabindex
- 6. Auto-Play mit Pause-on-Hover und Pause-on-Focus
- 7. ARIA-Rollen und Live-Region für Screenreader
- 8. Paginierungspunkte und Thumbnail-Navigation
- 9. Alpine Carousel vs. Swiper.js im Vergleich
- 10. Zusammenfassung
- 11. FAQ
1. Warum kein Swiper.js auf Hyvä-Seiten
Swiper.js ist die populärste