Hero Slider stutters on load

[lesliekirk]

The Hero Slider on this SFNT will stutter on loading - all the images display - then fall into place. What can be done to resolve it?

[Matt Zimmermann]

Hi Leslie,

Looks like you might have a JavaScript error on the page from Slick. This may be causing the stutter you are talking about. You can also set the section to visibility: hidden; and then after Slick loads, change it to visibility: visible;

[lesliekirk]

Hi Leslie,

Looks like you might have a JavaScript error on the page from Slick. This may be causing the stutter you are talking about. You can also set the section to visibility: hidden; and then after Slick loads, change it to visibility: visible;

I fixed the JavaScript error - that didn't resolve it.

I tried

.hero-slider {visibility: hidden;}
.hero-slider.slick-initialized {visibility: visible; }

that just results in a big jump white space before the image loads.

[Matt Zimmermann]

Hi Leslie,

Since the script is taking time to load and initialize, that is why you see the white space. You can try modifying the classes you used to add some smoothness to the loading:

.hero-slider {
    opacity: 0;
    overflow: hidden;
    transition: opacity cubic-bezier(0, 0, 0.4, 1) 0.15s, visibility cubic-bezier(0, 0, 0.4, 1) 0.15s;
    visibility: hidden;
}

.hero-slider.slick-initialized {
    opacity: 1;
    overflow: auto;
    visibility: visible;
}

[lesliekirk]

That jumps too, seems a little slower.