Button next and previous not working in RTL

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.

MIT License

247 stars 30 forks source link

Button next and previous not working in RTL #86

Open heyyo-droid opened 11 months ago

heyyo-droid commented 11 months ago

Describe the bug in RTL website, Navigation and indicators are clickaable(we see mouse pointer on hover) but clicking has no effect.

To Reproduce Example of configuration used not working: https://swiffyslider.com/configuration/?slider-item-ratio=slider-item-ratio&slider-item-snapping=slider-item-snapstart&slider-nav-visible=slider-nav-visible&slider-indicators-style=slider-indicators-round&slider-indicators-highlight=slider-indicators-highlight&preview-style=preview-images

In LTR no issue.

heyyo-droid commented 11 months ago

Adding an online demo: https://jsfiddle.net/wk2Lpndx/7/

It will work if you just replace <html dir="rtl"> by <html dir="ltr">

MirazMac commented 10 months ago

Facing the same issue. On RTL mode, clicking the buttons doesn't do anything. But touch scrolling works fine in RTL direction.

Saggv commented 8 months ago

Adding an online demo: https://jsfiddle.net/wk2Lpndx/7/

It will work if you just replace <html dir="rtl"> by <html dir="ltr">

Hi @heyyo-droid ,

is this the way to fix the issue? I'm facing this issue and add but it didnot work. I'm use angluar

heyyo-droid commented 8 months ago

I didn't provide any solution in my fiddle, it just demonstrate the bug that the slider buttons are not working in RTL direction but does in LTR.

Adding an online demo: https://jsfiddle.net/wk2Lpndx/7/ It will work if you just replace <html dir="rtl"> by <html dir="ltr">

Hi @heyyo-droid ,

is this the way to fix the issue? I'm facing this issue and add but it didnot work. I'm use angluar

heyyo-droid commented 7 months ago

Hi @nicped , Any chance we will get this annoying bug fixed ?

Your library is awesome we love it, we use it now on all our projects, but this bug in Right To Left websites is a really a big limitation.

I updated my fiddle to make it a little more explicative. https://jsfiddle.net/wk2Lpndx/7/

quadrexdb commented 7 months ago

I'm also interested in this one. It's a must-have feature for websites with RTL languages.

heyyo-droid commented 7 months ago

The direction of an element could be set on the element itself using dir="rtl", or on any parent.

So we can't only retrieve dir property value. We need to use window.getComputedStyle

Code to detect the direction of an HTML element:

const elem = document.getElementById('slider');
let direction = window.getComputedStyle(elem, null).getPropertyValue('direction');

PS: usually on RTL pages, dir="rtl" is set on the <html> element

heyyo-droid commented 7 months ago

Hi @nicped , I just pushed a pull request adding RTL support in CSS and JS, and also some examples.

PS: I also added a .vscode settings.json for Linux. I needed it to adapt emeraldwalk.runonsave configuration for Linux shell. (Not sure if VScode can handle several Operating systems in one unique settings.json file, so I just added separate file for Linux)

quadrexdb commented 7 months ago

Looks good to me

heyyo-droid commented 7 months ago

I put in place a Github page to preview RTL support:

nicped commented 6 months ago

Awesome - thanks for chipping in. Looks good - I will give it a spin together with a bunch of other changes that needs to be published as well...

heyyo-droid commented 6 months ago

I was thinking to add Direction as new checkbox in Configuration page too. What do you think ?

heyyo-droid commented 6 months ago

Awesome - thanks for chipping in. Looks good - I will give it a spin together with a bunch of other changes that needs to be published as well...

I'm curious what will come next on top of the current :icecream:

heyyo-droid commented 3 months ago