Skip to content

[Enhancement]: Add Embla Auto Scroll support #146

@theMasudRana

Description

@theMasudRana

[Enhancement]: Add Embla Auto Scroll support

Feature description

Add first-class support for Embla's Auto Scroll plugin so rtCarousel can create smooth, continuous scrolling carousels in addition to the existing slide-by-slide Autoplay behavior.

Suggested editor settings:

  • Enable Auto Scroll
  • Speed
  • Direction: forward or backward
  • Start delay
  • Stop on interaction
  • Stop on mouse enter
  • Stop on focus in

This should likely be presented separately from the current Autoplay controls, for example as “Continuous auto-scroll” vs “Slide autoplay”, and the two modes should be mutually exclusive or clearly coordinated.

Problem it solves

rtCarousel already supports many Embla predefined examples, including loop, RTL, slides to scroll, drag free, alignment, y-axis, slides per view via column styles, autoplay, dots, controls, counter, and progress. However, it does not yet support Embla's Auto Scroll plugin.

The current Autoplay feature advances one snap at a time after a delay. That works well for hero sliders and testimonial carousels, but it is less ideal for logo strips, partner showcases, announcement tickers, and marquee-style carousels where users expect continuous motion.

Auto Scroll would make existing patterns like the Logo Showcase feel more polished and would unlock a common carousel use case without requiring custom code or a fork.

Additional context

Embla documents Auto Scroll as one of its predefined plugin examples for continuous scrolling:

Implementation notes:

  • Add embla-carousel-auto-scroll as a dependency.
  • Extend carousel attributes and saved Interactivity API context with Auto Scroll options.
  • Initialize the Auto Scroll plugin in src/blocks/carousel/view.ts alongside the existing Autoplay plugin handling.
  • Update TypeScript types in src/blocks/carousel/types.ts.
  • Add editor controls in src/blocks/carousel/edit.tsx.
  • Consider a new “Logo Marquee” or updated Logo Showcase pattern demonstrating continuous motion.
  • Add unit coverage for option serialization and plugin initialization behavior where practical.

Metadata

Metadata

Assignees

Labels

No labels
No labels
No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions