Slick Carousel Fade In on Load | Slick Carousel

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;
      
        }

view raw Slick Carousel Fade In on Load hosted with ❤ by GitHub

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.