search

shadeed / rtl-styling

An extensive guide on how to style for RTL in CSS
https://rtlstyling.com/
MIT License
351 stars 19 forks source link

Webflow Slider malfunction on RTL #22

Closed urbanoasisa closed 1 month ago

urbanoasisa commented 1 year ago

Hi guys,

so I have this problem in which the slider when in RTL language mode malfunctions

Public link : https://preview.webflow.com/preview/alhashem-law?utm_medium=preview_link&utm_source=designer&utm_content=alhashem-law&preview=2445d4e24e20100f761a953468a61c90&workflow=preview

Screen Record the issue: https://www.loom.com/share/21ee6256fd074ec59d061a75cff9da1d

Any ideas on how to fix this?

derokki commented 1 month ago

Hey @urbanoasisa - I've build a Javascript Solution for RTL Webflow Sliders:

<script src="https://cdn.jsdelivr.net/gh/derokki/rtlflow2.0-attributes@main/rf-rtl-wslider.js" ></script>

You need to set following Custom Attributes: -> dir = ltr on the Webflow Slider Mask -> rf-reverse-wslider = slider-auto on the Webflow Slider Component

This is part of the RTLflow Styleguide for RTL Webflow Development: https://www.derokki.dev/rtlflow

I'll make a video on this topic at some point, but feel free to message me via email (davor@derokki.dev) if you need any advice!

shadeed commented 1 month ago

Closing this as it's off-topic.