SOLVED : Create a custom slider

Hi There,

I have been looking at the slider element and was wondering it was possible to adjust the content of the sliders slides on A per slide basic ie.

having 2 slides where the content of the first slide is aligned to the left and the second slide is aligned to the right?

Hi @CprlRst,

seems like i am the custom css guy :grinning_face_with_smiling_eyes:

You can overwrite the styles of the Slider items via nth-child or nth-of-type. Just put something like this under Style » Css » Custom Css of the Slider Element and all “even” Slides (0,2,4,6,…) will be aligned to the left, all “odd” Slides (1,3,5,7,…) will be aligned to the right.

root .slider-item:nth-child(odd) {
  justify-content: flex-end;
}

root .slider-item:nth-child(even) {
  justify-content: flex-start;
}

However, I would not recommend it, because it’s a kind of strange behavior the user won’t expect.

Regards,
timmse

Edit: Sorry, had a mistake in my code. Now it should work.

2 Likes