Slick slider image load on a list for a second

[rosansubba]

short description of the bug / issue, provide more detail below.
Load image on a list for a second
====================================================================

[ https://i.gyazo.com/3ebf102108f2b746e9897db26bc15595.gif ]

use this jsfiddle to reproduce your bug:
https://i.gyazo.com/3ebf102108f2b746e9897db26bc15595.gif
we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. ...
2. ...

====================================================================

What is the expected behaviour?

...

====================================================================

What is observed behaviour?

...

====================================================================

More Details

• Which browsers/versions does it happen on?
• Which jQuery/Slick version are you using?
• Did this work before?

[ahmadalfy]

This is not an issue with slick. This is because slick fire when the rest of JavaScript is loaded. You probably need to hide the times using CSS when slick is not initialized. Something like the following:

<div class=“my-custom-slider”>
    <div class=“item”><img src=“image.jpg” /></div>
    <div class=“item”><img src=“image.jpg” /></div>
    <div class=“item”><img src=“image.jpg” /></div>
    <div class=“item”><img src=“image.jpg” /></div>
</div>

By hiding all the slides except the first one:

.my-custom-slider .item + .item { display: none; }

Now when slick is initialized, it add a class called slick-initialized to the container. We can use it to display the rest of the items like the following:

.my-custom-slider.slick-initialized .item + .item { display: block; }