Streaming live at 10am (PST)

Slider not working under RTL div


#1

In the example project there are two identical sliders with two slides each. Upper slider is under div with LTR direction and the lower slider is under div with RTL direction.
Upper slider works perfectly. Lower slider displays only the first slide.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @monkeymind,

Could you explain a bit more what you are trying to achieve with the RTL of the second slider?

If it is because the content is suppose to be written right to left you should try to put that setting on the parent of the content. In this example if you apply a class to the slides instead of the slider you would be able to do it.

According to MDN it seems that it’s best practice to use html attributs for directions rather than CSS property (which is what you access in the designer)

I hope that helps but I guess under the hood of the Webflow slider there is some javascript applying CSS transforms to the different slides to be displayed and setting right to left on it might changed the way transforms are applied.

Max


#3

Hi @Maximosaurus,
I just spent an hour trying to find out why my slider did not work. I develop a site in Hebrew, so the parent div was with RTL direction.
It may be a limitation of the slider to be positioned inside LTR container, but it has to be written somewhere.


#4

I think I understand your thinking, until @webflow provides a more accurate answer on this behaviour may I suggest a workaround?

What about setting the global classes to RTL?
You can use the All links, all paragraph, all H1 headings… etc (the pink classes) to set the RTL property. Basically apply this to all the text related kind of elements you need to use and it is to my opinion the cleanest way to deal with designing a site in hebrew or arabic as there is no sens for an image for example to be RTL.


#5

HI @monkeymind thanks for posting!

It looks like @Maximosaurus figured out the solution here. When working with prebuilt components like the slider, it’s important to note that setting certain styles may break the components default functionality. In this case, using RTL is one of those styles.

The best solution, as recommended by @Maximosaurus, is to set the RTL style on your text elements rather than parent containers.

Hope this helps :slight_smile:


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.