Slick: Hide slides before slick initialization

[fizerkhan]

I have 4 slides. before slick initialisation, it shows everything.
I want to display only first slide before slick initialisation. How do i do it?

[ThibaultNocchi]

I think that loading them hidden will do, like you do a display:none on them by default, and then you use the onInit() method to show your slides again, with display:block or inline, or inline-block...

I just discovered this today and I am using it right now, so I am not sure if it'll work. But I hope so. :)

[digitaljhelms]

Set visibility: hidden on your carousel wrapper by default, and add .slick-initialized { visibility: visible; }. Once slick is initialized, it adds the slick-initialized class to the wrapper which will bring its visibility back.

[kenwheeler]

Thanks @digitaljhelms

[fizerkhan]

@digitaljhelms Thanks mate. It works great.

[vlanard]

This seems to come up for a lot of people, myself included. This solution is great, as is slick!
Might be worth including this in the readme or otherwise incorporating into the default behavior via styles.

[maxgitt]

I set my carousel wrapper to { visibility: hidden } in my css file. And my script currently looks like this. However, upon initializing the carousel does not become visible. Please help!

$(document).ready(function(){
        $(#carousel).on('init', function () {
            visibility: visible;
        });
        $('#carousel').slick({
            speed: 300,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true,
            prevArrow: $('.prev_box'),
            nextArrow: $('.next_box'),
            infinite: true,
        });
    });

[iamricky]

@maxgittelman Did you find the answer to your problem?

[jeroenhouben]

@maxgittelman You should invoke jQuery's css() function, which you're not doing at the moment.

[MohammadDayeh]

add class "slick-slide" to each slide wrapper in your HTML and it is solved :)

.slick-slide has display: none; in slick.css, and .slick-initialized .slick-slide has display: block;

<div id="your-slider" class="slick-slider">
    <div class="slick-slide">
        your content
    </div>
    <div class="slick-slide">
        your content
    </div>
    <div class="slick-slide">
        your content
    </div>
</div>

[danyj]

this worked for me and there is no flashing from display property switch and no need for opacity, your slider looks like first slide on load until initiation and if there are any script issues your layout is not stretched.

.slick-slider .slick-slide{
    position:absolute;
}
 .slick-slider .slick-slide:first-child{
    position:relative;
}
.slick-initialized.slick-slider .slick-slide,
.slick-initialized.slick-slider .slick-slide:first-child{
    position:relative;
}

just tested and this works also

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

[pfar54]

I am running into this issue. Does anyone see what I am doing wrong? My issue I believe comes from the wrapper being set to display: none from the start https://jsfiddle.net/ndzf7gx6/1/

[jarfer]

Hi all,

Does anyone have an actual solution to this? All those posted in this thread fail for various reasons - the core one being that Slick Carousel will actually not work at all if in elements set to display:none it computes width of the visible element, as a result these widths end up being 0.

None of the solutions posted here would work for this reason - to save anyone else the time messing about

But I am keen to know how to solve this issue as it looks horrendous when loading - especially if this is in a CMS and the client has included a lot of large images

[steveinatorx]

none of these solutions worked for me i was still getting the initial flash of my img slides on load - to fix this i had to add a class to each subsequent slide img after the first one that had visibility:hidden (i called this class .hidden) (i added a class called carouselImg to all the img slides after the first for the selector)

and then :

$("#slick").on('init', function () {
            $(".carouselImg").removeClass('hidden');
 }); 

that did the trick.

[adcosta118]

If you want to display only the first n slides until slick is loaded, you can use this:

.slick-init-1:not(.slick-initialized) > :nth-child(n+2),
.slick-init-2:not(.slick-initialized) > :nth-child(n+3),
.slick-init-3:not(.slick-initialized) > :nth-child(n+4) {
  display: none;
}

And add the corresponding slick-init class to your container.

The obvious downside to this approach is that you need one rule for each initial n that your wish to declare.

[maofree]

solved using display: none; instead of visible: hidden

myslider {display: none;}

myslider.slick-initialized {display: block;}

[Marycka9]

.slider-slick:not(.slick-initialized) > .slick-slide:not(.slick-active){
display: none
}

.slider-slick - parent class slider

[Luneya]

Took me a while, but I found another topic explaining that the 'on init' event needs to called on BEFORE the js to load the slider itself.

So for me, the answer of @steveinatorx worked, provided to you load the on init js first.

[alefwebstore]

I don't think that visibility:hidden is a 100% solution because you got a blank space until the slider is initialized. Using display:none fails because slick can't get the wrapper size.

My own solution:

#slider{
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    transition: height 0.2s linear;
}

$('#slider').on('init', function () {
  $('#slider').css({
    height: 'auto',
    visibility: 'visible'
  });
});

[beifler]

I tried all of the above, nothing stopped the un-initialized slides from showing.

This is an imperfect solution, but it stops the slides from showing below the slider frame:

slider {

height: 400px;
overflow: hidden;
}

[anikaabreu]

hey guys.

The only thing I found that worked for me is adding the class .slick-slide to the slides I want hidden and then adding the visibility to the active slides, like so:

.slick-slide {
visibility: hidden;
}

.slick-active {
visibility: visible;
}

[Glideh]

@MohammadDayeh's solution remains the cleanest for me (applying the slick-slide class to the elements)

To shorten the delay of display, I'd also load the script right after the markup

<div id="your-slider" class="slick-slider">
    <div class="slick-slide">Slide 1</div>
    <div class="slick-slide">Slide 2</div>
    <div class="slick-slide">Slide 3</div>
</div>
<script>
$('#your-slider').slick({
// ...
})
</script>

_Make sure jQuery & Slick are loaded before_

[HaulyShit]

This was works for me:

.slick-slider {
    > div {
        display : none;

        &:first-child {
            display: block;
        }
    }

    &.slick-initialized {
        > div {
            display: block;
        }
    }
}

[malasaad82]

Thanks @HaulyShit , Very nice 👍

[andyvu92]

In case someone will need it, I got a solution that working great without using any scripts.

First, set the carousel wrapper default in css as follow:
.wrapper{
height: 0;
overflow: hidden;
}

On visible, set height to auto
.wrapper.active{
height: auto;
padding-bottom: 65px;
}

Remember to set the dots:
.slick-dots {
position: absolute;
bottom: 0px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}

If you need s smooth fade in, you will need to use jquery to handle it.

[akshayBe]

the solution form @MohammadDayeh worked for me. simply add slick-slide to the individual slider divs

[sdconnors2019]

Agreed: The solution from MohammadDayeh worked for me also, add the "slick-slide" to each of the slider's "div" element, which seems to prevent all the pics in these divs from "preloading" and flickering briefly before disappearing.

However, then I noticed a new type of flicker:

• the first pic was not loading immediately either, and therefore not taking up space - so the elements below it were briefly up top, then pushed down once the first pic loaded, causing a brief flicker.

FIX: On your first slide div, simply leave the "slick-slide" class off and it loads right away correctly, this prevents that other flicker.

[DoopsDesigns]

I achieved this after a little bit of bother by manually setting the classes .slick-slider & .slick-slide, then using this css:

.slick-slider {
    overflow: hidden;
    visibility: hidden;
}
.slick-slider.slick-initialized {
    visibility: visible;
}
.slick-slider .slick-slide {
    overflow: hidden;
    visibility: hidden;
}
.slick-slider .slick-slide:first-of-type {
    visibility: visible;
}
.slick-slider.slick-initialized .slick-slide {
    visibility: visible;
}

Hopefully someone else can confirm this works for them?

[mahmoudelkhadragy]

this worked for me and there is no flashing from display property switch and no need for opacity, your slider looks like first slide on load until initiation and if there are any script issues your layout is not stretched.

.slick-slider .slick-slide{
    position:absolute;
}
 .slick-slider .slick-slide:first-child{
    position:relative;
}
.slick-initialized.slick-slider .slick-slide,
.slick-initialized.slick-slider .slick-slide:first-child{
    position:relative;
}

just tested and this works also

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

thanks it works for me

[awaishub]

@digitaljhelms thank you man...it's also worked for me..