[Help]: Transition when using keyboard navigation

[leventeszmolka]

Summary

Hi there,

I'm just wondering if there is a solution for the following. When the slides have focusable elements (e.g. button) and using keyboard navigation, currently (v8.5.2), there is no transition between the slides.

I could use :focus-within and force a CSS transition on the viewport element, but it would be great to have the same transition that is being applied to the viewport when we click on the arrow buttons to navigate between the slides.

Any advice on this please?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@leventeszmolka thanks for your question.

At the time of writing, you can't control this. It's an instant jump. However, you can set the watchFocus: false and recreate the internal SlideFocus.ts code but with transitions. The parameters the SlideFocus.ts depends on can be retrieved like so:

  root --> emblaApi.rootNode()
  slides --> emblaApi.slideNodes()
  slideRegistry --> emblaApi.internalEngine().slideRegistry
  scrollTo --> emblaApi.internalEngine().scrollTo
  scrollBody --> emblaApi.internalEngine().scrollBody
  eventStore -> emblaApi.internalEngine().eventStore
  eventHandler --> emblaApi.internalEngine().eventHandler

[leventeszmolka]

Hi @davidjerleke, many thanks for your detailed response. I will examine the workaround and will try to adapt for our use case. I believe it would be super useful in a future version to support this behaviour natively, maybe through a dedicated prop. The carousel library otherwise is fantastic, thank you for all the efforts.