Feature: Add Slide Thumbnail Navigation to rtCarousel
Summary
Add a new placeable Carousel Thumbnails child block for rt-carousel/carousel that displays automatic slide thumbnails and lets users navigate the carousel by clicking thumbnails.
Problem
rtCarousel currently supports arrows, dots, and progress indicators, but it does not provide visual thumbnail navigation. For image-heavy carousels, dots are not descriptive enough, and users cannot quickly identify or jump to a specific slide by preview.
Proposed Solution
Add a new rt-carousel/carousel-thumbnails block that can be inserted inside a carousel, similar to controls, dots, and progress.
The block should:
- Render one thumbnail per Embla scroll snap.
- Use the first image in each slide as the thumbnail when available.
- Fall back to a safe cloned/text preview for non-image slides.
- Scroll the main carousel when a thumbnail is clicked.
- Sync active thumbnail state when the main carousel changes.
- Scroll the thumbnail strip to keep the active thumbnail visible.
- Work in both editor and frontend.
Acceptance Criteria
- A new
Carousel Thumbnails block is available inside rt-carousel/carousel.
- Existing carousels remain valid without migration.
- Clicking a thumbnail changes the active slide.
- The active thumbnail receives visible styling and
aria-current.
- Image thumbnails fill the thumbnail box instead of appearing tiny.
- Editor thumbnails show slide images when available.
- Frontend thumbnails show slide images when available.
- Non-image slides still render a usable fallback thumbnail.
- Thumbnail navigation works with
slidesToScroll/snap-based navigation.
- Tests cover frontend click/sync behavior and editor rendering.
Technical Notes
- Register
carousel/thumbnails in plugin block registration.
- Add block files under
src/blocks/carousel/thumbnails/.
- Extend
view.ts with thumbnail initialization.
- Dispatch/listen for a carousel-ready event so thumbnails can initialize even if they mount before the main Embla instance.
- Sanitize cloned slide previews to avoid duplicate IDs, interactive attributes, and nested Interactivity API behavior.
Feature: Add Slide Thumbnail Navigation to rtCarousel
Summary
Add a new placeable
Carousel Thumbnailschild block forrt-carousel/carouselthat displays automatic slide thumbnails and lets users navigate the carousel by clicking thumbnails.Problem
rtCarousel currently supports arrows, dots, and progress indicators, but it does not provide visual thumbnail navigation. For image-heavy carousels, dots are not descriptive enough, and users cannot quickly identify or jump to a specific slide by preview.
Proposed Solution
Add a new
rt-carousel/carousel-thumbnailsblock that can be inserted inside a carousel, similar to controls, dots, and progress.The block should:
Acceptance Criteria
Carousel Thumbnailsblock is available insidert-carousel/carousel.aria-current.slidesToScroll/snap-based navigation.Technical Notes
carousel/thumbnailsin plugin block registration.src/blocks/carousel/thumbnails/.view.tswith thumbnail initialization.