Slick: Set a number of slides to open when page loads

Created on 16 Mar 2015  路  5Comments  路  Source: kenwheeler/slick

Hi,

First of all I apologise if my question is already answered here as I searched and couldn't find anything.

Ok so I have a 2 rows carousel with 8 slides and my issue is that slick loads all slides first then hides them showing only one slide per time.

Is there a way to set slick to load only one slide per time instead of loading all of them?

Most helpful comment

JSFiddle, please.

If you're talking about a flash of unstyled content (FOUC) then the solution is to set display:none; on your slides by default, and then set display: block; on slides with .slick-initialized class and to .slick-slide:first-child :smile:

All 5 comments

JSFiddle, please.

If you're talking about a flash of unstyled content (FOUC) then the solution is to set display:none; on your slides by default, and then set display: block; on slides with .slick-initialized class and to .slick-slide:first-child :smile:

I got FOUC syndrome too, would you put the slick-initialise style in the static css, or would you have to load it in the js?

If you're talking about a flash of unstyled content (FOUC) then the solution is to set display:none; on your slides by default, and then set display: block; on slides with .slick-initialised class and to .slick-slide::first-child

Thanks for tip @simeydotme! :+1:

Not a big deal, but here's a slight correction to your code suggestions:

.slick-initialized,
.slick-slide:first-child { display: block; }

Note spelling, and first-child as pseudo-class.

Thanks again!

:+1:
Thanks, updated my comment for the typo and for the silly Americanizsed mistake ;) _snigger_

silly Americanzsed mistake ;) snigger

Ah, right! Lol. Funny. :laughing:

Was this page helpful?
0 / 5 - 0 ratings