Question:

I have been trying to get a slick slider to work for a few hours now, and after trying all the suggestions on relevant SO questions, nothing has worked.<br /> My images are 1080px tall, but slick displays them as 1px tall.<br /> FYI, the images have enough transparent space at the bottom and I am planning to move the dots up on top of the image to keep the page without scroll bars. I am also planning to make the navigation arrows smaller, though they should still be on top of the image.

I have the entire slider having the full height as well as the everything within (.fullheight and .backimg).

<div id="picslider" style="height: 100%"> <a href="#" class="fullheight"><img src="https://octolopagon.games/_resources/img/olumian.png" class="backimg"></a> <a href="#" class="fullheight"><img src="https://octolopagon.games/_resources/img/support.png" class="backimg"></a> </div>

The full code is at <a href="https://jsfiddle.net/wrtvq2we/" rel="nofollow">https://jsfiddle.net/wrtvq2we/</a>

Any help is appreciated.

You should give the container where the slides are in a height, otherwise the height will always be 1px. So you can give .slick-track a height desired to your needs. Here's <a href="https://jsfiddle.net/pu20db6w/" rel="nofollow">an updated JSfiddle</a>.

The images that are inside the slider will grow (in height and width) to the set height of the container.