All slides have is-current-slide class... and i struggle to understand why

[TristanP]

Hi there!

I am trying to make my CSS/JQuery smarter for a specific use case and want to use the is-current-slide class for this.

However, on the slider that i am working with… all slides have the is-current-slide class?? And I fail to understand what setting is causing this?

[ruenel]

Hello Tristan,

Thanks for writing in!

All of your slides has the “is-current-slide” because you only have 3 slides and then in your Slide Options, you are trying to display 4 slides. This means that all 4 slides will be displayed at once and this 4 slides will have the “is-current-slide” class. So, if you have more than 4 slides, the rest of the slides will not have the “is-current-slide” when they are not visible yet.

Hope this makes sense.

[TristanP]

Ah ok that makes perfect sense!

As you may have noticed, i use the slides as buttons to make the content below appear / disappear. (Side note: Could have used regular buttons or divs obviously, but the slider made perfect sense because it responds across screen sizes exactly the way i want out of the box!)

I now use JQuery to highlight one of the slides as ‘active’ but if i could use is-active-slide for that instead, it would make my life even easier. I do however need 3 slides to be visible in the larger screens.

[ruenel]

Hello Tristan,

I have checked that page and it is perfectly doing great. I can click on each slide and the content below it appears as expected. In my opinion, I would recommend that you turn OFF the Drag interaction instead and then set “3” for the “# Per Page” option so that the slides will appear to be evenly in the middle of the page.

Cheers.