Slick: Vertical slider moving down

[winnewoerp]

Is there a way to get a vertical slider with slides moving down instead of up? If yes, how does it work? Here's an example of how I want it to behave:
http://www.gyula-trebitsch-schule-tonndorf.de/

Everything else works fine!

Thank you!
winnewoerp

[Abraham-Tourdex]

There is a 'vertical' option available in the passed options list - http://kenwheeler.github.io/slick/ give that a go?

[winnewoerp]

Yes, thank you. But that's "vertical up". I don't see a possibility to change this to "vertical down" with the given options, unfortunately. I found this pull, but it seems to me that it hasn't been included yet to the Slick core: https://github.com/kenwheeler/slick/pull/2226
Is there any other way to do it?

[Abraham-Tourdex]

Hmm that's all I got, maybe try using that code in the pull you linked.

[Abraham-Tourdex]

You could also try using a css transform to rotate the whole element 180degrees and then rotate all its children back 180 degrees? Then the 'up' might be 'down'... A bit hacky but hey this is web dev ;)

[winnewoerp]

This is a pretty good proposal. :) I will try that (rather than manipulating the JS code, which I would have to study in deail first). Thank you!

[winnewoerp]

It worked! This did the trick:

.slick-slider .slick-list {
    transform:rotate(180deg);
}

.slick-slider .slick-slide {
    transform:rotate(180deg);
}

Some additional code was necessary for the correct display of text within the slides:

.slick-slider .slick-slide.slick-active {
    position:relative;
    z-index:1;
}

/* text in my case is placed in a <figcaption> tag */
.slick-slider figcaption {
    visibility:hidden;
}

.slick-slider .slick-slide.slick-active figcaption {
    visibility:visible;
}

Once again: Thank you very much!

[Abraham-Tourdex]

Thanks for posting your solution!