Slick Slider Disappears

  • Hi Frank,
    I have a problem which I was not able to resolve and wondering if you can help out guide me in the right direction.
    So here’s what happens. When I inline the above the fold CSS, the slider on my site stops working. It’s a slick slider.
    I noticed that CSS classes within the HTML that existed before:
    Without Autoptimize CSS Optimization
    Are now not there:
    After inlining above the fold CSS
    The CSS for these is in the critical CSS list, but they simply don’t appear in the HTML. What could be the problem?

    • This topic was modified 7 years, 10 months ago by savo86.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Frank Goossens

    (@futtta)

    if you slider works without critical CSS, then the problem is likely with the above the fold CSS you use. can you share your URL so I can have a quick look?

    frank

    Thread Starter savo86

    (@savo86)

    Sure, it’s https://signaramafranchise.com/

    When I activate the critical CSS option (I’ve generated the CSS with Jonas Ohlsson’s generator), it looks like the first moment of loading – the upper section in question, which disappears, is not available and the three boxes take its place. Here is what I mean:
    Signarama Franchise - Flash of Unstyled Content

    Thanks!

    Plugin Author Frank Goossens

    (@futtta)

    well, try adding something like this to the critical CSS;
    .slick-slider{height:352px;}

    Thread Starter savo86

    (@savo86)

    Hi Frank,

    Thanks for the response. It is strange how this class disappears when I activate critical CSS. Nonetheless you pointed me in the right direction. I assigned the fixed height to another class which is assigned to one of the containers and it works.
    However, I will now need to figure out if the fixed height presents a problem for responsiveness and also figure out why the image of the guy ends up at the bottom.
    Thanks for your input, I will seek the help of one of our developers to get this sorted out.
    Love the plugin!

    Plugin Author Frank Goossens

    (@futtta)

    yeah, you’ll probably need to wrap this in some mediaqueries for responsiveness sake. and for that picture of that guy you’ll indeed need tweak the custom critical css as well.

    the root cause is that a lot of your above-the-fold page is JS-driven, so the basic critical CSS doesn’t cover everything. is you disable JS, you’ll see almost see the exact same thing as the screenshot you shared.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Slick Slider Disappears’ is closed to new replies.