Stacked image slide – Blancer.com Tutorials and projects

Hello I’m using slick slide to make the slides in a list of images on my page, but when loading the screen the images appear stacked and then they go to the slide format, is there any solution to only display them when they are already in slides ?

Html:

<div class="conteiner">
        <div class="row-fluid">
            <div class="titulo-vitrine-marcas">
                <span>{{ section.settings.title }}</span>
            </div>
            <div class="marcas">
                {% for block in section.blocks %}
                    <li class="marca">
                        {% if block.settings.collection != blank %}
                                {% if block.settings.image != blank %}
                                    {%- capture image_size -%}{{ section.settings.image_max_width }}x{%- endcapture -%}
                                    <img class="marca-imagem" style="max-width: {{ section.settings.image_max_width }}px;" src="{{ block.settings.image | img_url: image_size, scale: 2 }}" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}" onclick="location.href = '{{ block.settings.collection.url }}';">
                                {% endif %}
                        {% endif %}
                    </li>
                {% endfor %}
            </div>
        </div>
    </div>

JS:

$('.marcas').slick({
        infinite: true,
        dots: false,
        arrows: true,
        prevArrow:
            "<div class="slick-prev slick-arrow" style="display: block;"><svg enable-background="new 0 0 330.002 330.002" version="1.1" viewBox="0 0 330.002 330.002" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m233.25 306l-105.75-141 105.75-141c4.971-6.628 3.627-16.03-3-21-6.627-4.971-16.03-3.626-21 3l-112.5 150c-4 5.333-4 12.667 0 18l112.5 150c2.947 3.93 7.451 6.001 12.012 6.001 3.131 0 6.29-0.978 8.988-3.001 6.628-4.971 7.971-14.373 3-21z"></path></svg></div>",
        nextArrow:
            "<div class="slick-next slick-arrow" style="display: block;"><svg enable-background="new 0 0 330.002 330.002" version="1.1" viewBox="0 0 330.002 330.002" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m233.25 156l-112.5-150c-4.972-6.628-14.372-7.97-21-3-6.628 4.971-7.971 14.373-3 21l105.75 141-105.75 141c-4.971 6.627-3.627 16.03 3 21 2.698 2.024 5.856 3.001 8.988 3.001 4.561 0 9.065-2.072 12.012-6.001l112.5-150c4-5.333 4-12.667 0-18z"></path></svg></div>",
        slidesToShow: 4,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 980,
                settings: {
                    autoplay: false,
                    autoplaySpeed: 2000,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true,
                    arrows: true,
                    prevArrow:
                        "<divx20class=x22slick-prevx22><svgx20width=x22451.85pxx22x20height=x22451.85pxx22x20enable-background=x22newx200x200x20451.847x20451.847x22x20version=x221.1x22x20viewBox=x220x200x20451.847x20451.847x22x20xml:space=x22preservex22x20xmlns=x22http://www.w3.org/2000/svgx22><pathx20d=x22m97.141x20225.92c0-8.095x203.091-16.192x209.259-22.366l194.29-194.28c12.359-12.359x2032.397-12.359x2044.751x200x2012.354x2012.354x2012.354x2032.388x200x2044.748l-171.92x20171.9x20171.9x20171.91c12.354x2012.354x2012.354x2032.391x200x2044.744-12.354x2012.365-32.386x2012.365-44.745x200l-194.29-194.28c-6.167-6.177-9.252-14.274-9.252-22.372zx22/></svg></div>",
                    nextArrow:
                        "<divx20class=x22slick-nextx22><svgx20width=x22451.85pxx22x20height=x22451.85pxx22x20enable-background=x22newx200x200x20451.846x20451.847x22x20version=x221.1x22x20viewBox=x220x200x20451.846x20451.847x22x20xml:space=x22preservex22x20xmlns=x22http://www.w3.org/2000/svgx22><pathx20d=x22m345.44x20248.29l-194.29x20194.28c-12.359x2012.365-32.397x2012.365-44.75x200-12.354-12.354-12.354-32.391x200-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394x200-44.748x2012.354-12.359x2032.391-12.359x2044.75x200l194.29x20194.28c6.177x206.18x209.262x2014.271x209.262x2022.366x200x208.099-3.091x2016.196-9.267x2022.373zx22/></svg></div>",
                }
            }
        ]
    });

CSS:

.vitrine-marcas .conteiner {
    padding-bottom: 30px !important;
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
}

.vitrine-marcas .marcas li {
    height: 100%;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo-vitrine-marcas {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    position: relative;
}

.titulo-vitrine-marcas span {
    font-size: 25px;
    font-weight: 500;
}

.vitrine-marcas .marcas .slick-prev {
    left: -25px;
}

.vitrine-marcas .marcas .slick-next {
    right: -25px;
}

.vitrine-marcas .marcas .slick-arrow {
    cursor: pointer;
    position: absolute;
    z-index: 1;
}

.vitrine-marcas .marcas .slick-arrow svg {
    width: 33px;
    height: 33px;
    display: flex;
}

@media only screen and (max-width: 1024px) {
    .titulo-vitrine-marcas span {
        font-size: 20px;
    }

    .vitrine-marcas .marcas .slick-prev {
        left: -5px;
        margin-left: 20px;
    }

    .vitrine-marcas .marcas .slick-next {
        right: -5px !important;
        margin-right: 20px;
    }

    .vitrine-marcas .marcas .slick-arrow svg {
        width: 25px;
        height: 25px;
    }
}

.vitrine-marcas .slick-slider {
    display: flex !important;
    align-items: center !important;
}

.slick-track {
    display: flex !important;
}

.slick-slide {
    height: inherit !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

When starting the page it looks like this:

After: