How can I perfectly emulate the prev/next buttons in slick.js?

Question

For reference, I'm talking about Ken Wheeler's Slick slider .

Having some problems getting "dynamic" (loaded from a database) images showing up when my page is loaded, only the top 20px or so is showing but not the rest for some reason. If you drag them or click the prev/next buttons they will show fully and the slider works as it should.

My work-around, thus, is to display a short text saying "Click to show images" that is hidden behind the images if they do show up, but displayed if things are buggy.

Since the prev/next buttons are working even when the bug comes up, I figured I'd do this in my click event for the div-to-fix-bug :

$('.gallery').slick('slickNext')
//gallery is the slider

But it won't work, which leads me to believe that the actual prev/next buttons do something else! I'm too much of a novice to go through the source code so I'm asking here instead how I can emulate the prev/next buttons better than slickNext .

Answer 1

Instead of referring to the slickNext, it's better to act before slides change:

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  // add your bug-fixing script here and do so only for the relevant slide (nextSlide)
});

Wasn't sure what your exact question was, if it wasn't helpful please add a JSFiddle.