slick vertical scrolling and overlays

Question

Following on from this question, I'm wondering why does setting the scroll direction of the slider to vertical not scroll up and down properly? Could it be an issue with slick, or the CSS code that accompanies it? See http://codepen.io/anon/pen/VeELqN

It appears, even without the CSS code, the vertical scrolling appears very broken and miscalculating the top y position for the next slide.

Not really sure what code to put here to get past this annoying hint so, this is how the slick object is initialised:

$('#slider').slick({
    autoPlay:true,
    dots: true,
    arrows: true,
    vertical: true,
  }); 

Answer 1

As you can observe from your browser's developer tools, some slick-slide elements' height have been miscalculated by the plugin, because slick sets that value to 'auto' thus overriding your rules. You can solve this by changing your css rules to the following:

.slick-slide {
    height: 200px !important;
}