Slick carousel is broken until first slide

Question

I want carousel on my website, but I have some issues with it. After I first load it it looks completely broken, but after I click on next/prev button then the carousel magically fix itself. I've made a code snipped, but the code was too big. So here is the link to the website: http://pouze.kvalitne.cz/BigProject/. The carousel is located after the "PON" button, I'd also made a gif what it looks like: https://i.imgur.com/yclhI2X.gif.

Code relating to carousel

HTML

             <div id="page2" hidden style="width: 75vw; min-width: 75vw; height: 60vh;">
                <div class="for_slick_slider multiple-items">
                    <div class="items leftFood">
                        <div class="FoodTop">
                            <img src="img/food2.png" width="140px" height="140px">
                        </div>
                        <div class="FoodBottom">
                            <span class="foodSpanName">Grilled chicken</span>
                            <span class="foodSpanPrice">212 CZK</span>
                            <span class="foodSpanInfo">Delicate pork and a decent taste of peppergsdf gdfs gsdf gdsf gsdfgsdfgd f
                                gsdfg sd fgsdfg</span>
                        </div>
                    </div>
                    <div class="items middleFood">
                        <div class="FoodTop">
                            <img src="img/food1.png" width="140px" height="140px">
                        </div>
                        <div class="FoodBottom">
                            <span class="foodSpanName">Grilled chicken</span>
                            <span class="foodSpanPrice">212 CZK</span>
                            <span class="foodSpanInfo">Delicate pork and a decent taste of peppergsdf gdfs gsdf gdsf gsdfgsdfgd f
                                gsdfg sd fgsdfg</span>
                        </div>
                    </div>
                    <div class="items rightFood">
                        <div class="FoodTop">
                            <img src="img/food3.png" width="140px" height="140px">
                        </div>
                        <div class="FoodBottom">
                            <span class="foodSpanName">Pork with pepper</span>
                            <span class="foodSpanPrice">234 CZK</span>
                            <span class="foodSpanInfo">Grilled chickn margherita is incredibly tasty</span>
                        </div>
                    </div>
                    <div class="items leftFood">
                        <div class="FoodTop">
                            <img src="img/food2.png" width="140px" height="140px">
                        </div>
                        <div class="FoodBottom">
                            <span class="foodSpanName">Grilled chicken</span>
                            <span class="foodSpanPrice">212 CZK</span>
                            <span class="foodSpanInfo">Delicate pork and a decent taste of peppergsdf gdfs gsdf gdsf gsdfgsdfgd f
                                gsdfg sd fgsdfg</span>
                        </div>
                    </div>
                    <div class="items middleFood">
                        <div class="FoodTop">
                            <img src="img/food1.png" width="140px" height="140px">
                        </div>
                        <div class="FoodBottom">
                            <span class="foodSpanName">Grilled chicken</span>
                            <span class="foodSpanPrice">212 CZK</span>
                            <span class="foodSpanInfo">Delicate pork and a decent taste of peppergsdf gdfs gsdf gdsf gsdfgsdfgd f
                                gsdfg sd fgsdfg</span>
                        </div>
                    </div>
                    <div class="items rightFood">
                        <div class="FoodTop">
                            <img src="img/food3.png" width="140px" height="140px">
                        </div>
                        <div class="FoodBottom">
                            <span class="foodSpanName">Pork with pepper</span>
                            <span class="foodSpanPrice">234 CZK</span>
                            <span class="foodSpanInfo">Grilled chickn margherita is incredibly tasty</span>
                        </div>
                    </div>
                </div>
            </div>

CSS

.for_slick_slider {
    display: flex;
    align-items: center;
}

.for_slick_slider .items {
    width: 16rem;
    height: 20rem;
    margin: 50px;
    transition: .5s ease;
}

.for_slick_slider .slick-center {
    width: 20rem;
    height: 28rem;
}

.slick-arrow {
    z-index: 1;
    position: absolute;
    top: 20vh;
    height: 5rem;
    width: 5rem;
}
.slick-prev{
    left: -3rem;
}
.slick-next{
    right: -3rem;
}

JAVASCRIPT

$('.multiple-items').slick({
    centerMode: true,
    centerPadding: "10px",
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    draggable: false,
});

Answer 1

The issue seems to be you're initializing slick while the carousel is hidden, so it can't set correct positioning and sizes.

Try calling $('.multiple-items').slick('reinit') or $('.multiple-items').slick('resize') after the parent div#page2 fades in.