Has anyone been able to replicate the relative styling part of the slider tutorial? So the active slide can be styled like the black background here? I’ve tried over and over and can’t get the active state to work. Looks like the copy link feature is different now so I just duplicated with link copied block on and that appeared to link them and work.
Hi @Brendon,
Yes. We have done many kinds of styled sliders with Cwicly from simple testimonial sliders, to fancy carousels. It is pretty straightforward, you just need to differentiate what type of slider you are using, whether it is dynamic or static.
If you are using static sliders using the Slider block, then this uses Swiper internally, so you’ll need to target swiper-slide-active class in your relative style.
If you are using dynamic sliders (e.g. the Query Template block, Repeater block, etc), then that uses Splide internally, so you have to target the is-active class in your relative style.
Example of relative style for styling the active state when using the dynamic slider:
(for static sliders just replace splide__slide with swiper-slide and is-active with swiper-slide-active)
I also recommend using the relative styles on global classes instead of directly on block styles, as it is much easier to re-use these.
Once again thanks for the help Dan. This is almost working now for me now I’m using the swiper classes you mentioned. It correctly shows the 1 as active but unfortunately it does not change when I select 2,3… 1 just stays the same with the relative style. It’s just a static slider with one slider controlling the other. I used buttons for the pagination and duplicated them with copy link on which added the class and they linked up ok.
