Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Button next and previous not working in RTL #86

Open
heyyo-droid opened this issue Oct 20, 2023 · 15 comments
Open

Button next and previous not working in RTL #86

heyyo-droid opened this issue Oct 20, 2023 · 15 comments

Comments

@heyyo-droid
Copy link

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
Copy link
Author

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

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

@MirazMac
Copy link

MirazMac commented Nov 9, 2023 •
edited
Loading

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

@Saggv
Copy link

Saggv commented Jan 14, 2024 •
edited
Loading

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
Copy link
Author

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
Copy link
Author

heyyo-droid commented Feb 28, 2024 •
edited
Loading

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
Copy link

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

@heyyo-droid
Copy link
Author

heyyo-droid commented Feb 28, 2024 •
edited
Loading

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 added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 Convert CSS to logical CSS for LTR & RTL support
84b3710
heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 add RTL support in swiffy-slider.js
00a0efb
heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 Add RTL examples in slider-indicators and slider-naviga…
dd7324f 
…tion
heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 Add Linux .vscode settings.json to support emeraldwalk.…
bb58449 
…runonsave
heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 use logical for horizontal direction not vertical
f38839b
heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 remove swiffy-slider.js from assets for debug purpose
93c2136
@heyyo-droid heyyo-droid mentioned this issue Mar 1, 2024
Open
@heyyo-droid
Copy link
Author

heyyo-droid commented Mar 1, 2024 •
edited
Loading

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)

heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 1, 2024
@heyyo-droid
dynamicweb#86 Add ESM too
ab92c04
@quadrexdb
Copy link

Looks good to me

@heyyo-droid
Copy link
Author

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

@nicped
Copy link
Member

nicped commented Mar 3, 2024

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
Copy link
Author

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

@heyyo-droid
Copy link
Author

heyyo-droid commented Mar 3, 2024 •
edited
Loading

image

heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 3, 2024
@heyyo-droid
dynamicweb#86 Adding Direction option in configuration page
42111b5
heyyo-droid added a commit to heyyo-droid/swiffy-slider that referenced this issue Mar 3, 2024
@heyyo-droid
dynamicweb#86 Fix removing direction
44b3562
@heyyo-droid
Copy link
Author

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 🍦

@heyyo-droid
Copy link
Author

@nicped any update on this ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@nicped @MirazMac @Saggv @heyyo-droid @quadrexdb