You don’t need any Javascript/jQuery to Fade in the Slick Carousel on Load as this can be acheived with just a few lines of CSS.
|
/* .slick-slider */ |
|
.slick-slider-class { |
|
opacity: 0; |
|
} |
|
/* Slider initialised class */ |
|
.slick-initialized { |
|
opacity:1; |
|
transition:opacity .3s ease-in; |
|
} |
Initially you need to hide the ‘.slick-slider’ div (note we use our own class for more targeting flexibility) with zero opacity and then reverse the opacity when the slider is initialised on ‘.slick-initialized’ class. Add a CSS ease for good measure.
About the Author
Glenn
A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.
