Skip to content

[Feature]: Add Slide Thumbnail Navigation to rtCarousel #140

@theMasudRana

Description

@theMasudRana

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions