search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.37k stars 164 forks source link

[Bug]: Thumbnails example won't work in RTL #825

Closed MHBahrampour closed 2 months ago

MHBahrampour commented 2 months ago

Which variants of Embla Carousel are you using?

Steps to reproduce

When I use the Thumbnails example in RTL direction, Thumbnails won't get re-positioned based on selected item. Also I can't drag the thumbnails viewport, it keeps returning to its initial position.

Here is what I did in order to have a RTL carousel:

  1. Added direction: 'rtl' as option.
  2. Added dir='rtl' to embla__viewport.
  3. Added dir='rtl' to embla-thumbs__viewport.

Expected Behavior

I expect the thumbnails viewport to be able to re-position the selected thumb to the center and be able to drag the thumbnails viewport just like when I use it in LTR.

Additional Context

I tried to investigate the problem and I found that emblaThumbsApi.scrollSnapList() can't get all the thumb items and returns only one item even though it should return an array containing all the snap point positions.

What browsers are you seeing the problem on?

Firefox, Chrome

Version

v8.0.2

CodeSandbox

https://codesandbox.io/p/sandbox/embla-carousel-thumbs-react-forked-q9hdq2?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv2lt4gf0006356gja3g00kv%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv2lt4gf0002356gmb5wedrh%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv2lt4gf0003356g6v3vpwkt%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv2lt4gf0005356gkdiaimdr%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv2lt4gf0002356gmb5wedrh%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv2lt4gf0001356gye1qmrze%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fjs%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A11%252C%2522startColumn%2522%253A37%252C%2522endLineNumber%2522%253A11%252C%2522endColumn%2522%253A37%257D%255D%257D%252C%257B%2522id%2522%253A%2522clv2o2ayd0002356gzte9mj1p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fjs%252FEmblaCarousel.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv2lt4gf0002356gmb5wedrh%2522%252C%2522activeTabId%2522%253A%2522clv2lt4gf0001356gye1qmrze%2522%257D%252C%2522clv2lt4gf0005356gkdiaimdr%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv2lt4gf0004356g1fxmvyf8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clv2lt4gf0005356gkdiaimdr%2522%252C%2522activeTabId%2522%253A%2522clv2lt4gf0004356g1fxmvyf8%2522%257D%252C%2522clv2lt4gf0003356g6v3vpwkt%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clv2lt4gf0003356g6v3vpwkt%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Before submitting

davidjerleke commented 2 months ago

@MHBahrampour this is not a bug. Please read this:

MHBahrampour commented 2 months ago

It worked, Thanks for your help.