Inline Slider - Targetting CSS for current slide

Support
#1

Hi all,

I’m looking to target the current slide in the inline slider and can’t seem to find what actually differentiates the current slide from the non-current slide.

I think it’s something like .is-current-slide, but I can’t quite seem to nail it.

Could you let me know what I need to target on both the current and non-current (if required).

I want to do a blur filter on the slides to the side.
Also, how do I only have 3 slides showing across the screen (desktop) at any one time without parts of the other slides showing?

Thanks in advance.

#2

Hey @azzacoward,

Thanks for writing in!

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:
https://www.youtube.com/watch?v=EY3CCMWD67o

Screenshot 2024-11-22 at 1.12.36 PM
Screenshot 2024-11-22 at 1.12.36 PM1986×444 201 KB

I would suggest using class hierarchy like .x-slide-container .x-slide.is-current-slide.

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.