Browser: Chrome 127.0.6533.120
OS: Windows
Hi bricks team,
1- Unlike the slider element, the default icons are not displayed in the Icon Picker in the nestable slider element.
2- I am using polylang and have created a Kannada language page. On this page, the nav nestable arrows are completely reversed. Please see the two screenshots below. But in the normal slider element, everything is fine and there is no problem.
in builder
front
Hi Hosein,
Thanks so much for your report!
The slider uses ionicon icons (icon font), and the nestable slider uses the default splide SVG icons (not a file or icon font). That’s not a bug.
Can you provide me with a live link?
Best regards,
timmse
Hi timmse, yes, sure
Please see this link. WordPress language is Persian (RTL). I have made a page with English language and I use nestable slider in it.
In this element, the position of the right arrow is set 100px from the right and for the left arrow, 100px from the left.
If you see the link above, the position values ​​are completely reversed. But everything is fine in the builder.
Thanks Hosein!
This should be easy to solve, as Splide already inserts a class to differentiate between LTR and RTL:
%root% .splide__arrows--rtl .splide__arrow--prev,
%root% .splide__arrows--ltr .splide__arrow--next {
right: 100px;
left: auto;
}
%root% .splide__arrows--rtl .splide__arrow--next,
%root% .splide__arrows--ltr .splide__arrow--prev {
left: 100px;
right: auto;
}
Hi @timmse,
Let me add one thing…
This bug is not only related to nestable slider arrows. in general, it is related to the nestable slider element.
Actually, the problem is that, unlike other elements, when we convert an RTL page to a second language (LTR), the nestable slider still maintains the RTL state. But in the front end everything is fine. Please note that your WordPress language must be RTL to reach this bug. Therefore, reaching this bug will be accompanied by the following steps :
4- After the Builder is loaded, you will see that the nestable slider still behaves like RTL, but in the frontend it is LTR. no problem.
I forgot to mention that I use polylang to make the website multilingual.
thanks
Hi @HOSEIN,
Thank you for the detailed explanation and screenshots.
The issue appears to be indirectly caused by Polylang. In Bricks, the Splide slider has a direction option (Options - Splide) that we set based on what the user defines. If the direction isn’t explicitly set, we default to using the is_rtl() function from WordPress (is_rtl() – Function | Developer.WordPress.org) to determine whether the page should be RTL or LTR.
However, when Polylang is active, it seems that is_rtl() is returning false even on RTL pages, despite the HTML direction being set correctly to RTL. This discrepancy causes the slider in the builder to behave as if it’s in LTR mode, even though it displays correctly on the frontend.
To avoid this issue, I recommend explicitly setting the direction in the slider element settings:
This should ensure that the slider behaves consistently in both the builder and on the frontend.
Let me know if you have any questions!
Hi @charaf, Thank you for the detailed explanation and also the time you took.
Since I’m using Google Translate, I may sometimes not understand your explanations as well as I should. So I apologize in advance for any possible problems on my behalf.
In RTL, the nestable slider works fine in both Builder and Frontend. but In LTR, there is no problem in the frontend, but in builder, nestable slider it is completely reversed.
It seems that the direction control in the nestable slider settings (your screenshot) does not help. Because this option only changes the direction of the slider move. But the following code in nestable slider solves the problem (but still the arrows are reversed)
%root%{
direction: LTR;
}
thanks
Hi @HOSEIN,
No worries about the language, I understand your issue 
When I set the direction explicitly in the slider element settings (either “left to right” or “right to left”), it becomes consistent in both the Builder and the Frontend even with Polylang enabled. Is that not the case for you, even after adjusting the direction in the settings for both languages?
Just to clarify, the inconsistency you’re seeing is due to how Polylang affects the is_rtl() function which is what we use to set the direction if no setting is provided by the user. If you explicitly set the direction in the settings, it should override this and work correctly.
If that’s not the case for you, it might be best to share temporary admin access and point me to the slider on your site. You can send the details to help@bricksbuilder.io.
Hi @charaf, Admin access sent with full description.
thanks
Hi @HOSEIN,
Thank you for sharing access,
I see where the confusion is now. While the frontend appeared to be correct, it actually wasn’t. You should regenerate your external styles to ensure that the builder and frontend are consistent, even on the LTR page. I’ve already regenerated the external styles on your site, and now the LTR is consistent in both the builder and the frontend. To avoid similar issues, it’s best to use inline styles during development.
Regarding the discrepancy between LTR and RTL: when you duplicate a page from RTL to LTR, the positions of the previous and next icons in the Splide slider are swapped.
Currently, your settings for the “right” and “left” arrows in LTR are incorrect (since they were directly copied from the RTL page):
They should be adjusted to:
To make this clearer, here are the screenshots showing how the arrows point to the previous and next icons in RTL:
And how they are swapped in LTR:
I hope this clarifies the issues. Please let me know if you have any further questions or if I missed something!
Hi @charaf,
I sincerely thank you. I apologize if I took your time. Everything is fine now.
