Slick Slader При первой загрузке сайта слайды-изображения не прогружаются

первая загрузка

При обновлении страницы слайды работают, но если почистить кэш - снова пропадают. Пробовал убрать flex, слайдер начинает работать нормально, сбивается центрирование, выравниваю контейнером - умирают все адаптивы, чтобы не делал с адаптивами, даже убирал контейнер, всё равно - если убрать флекс со слайдера - происходит лажа.

Вижу, что проблема популярная у слика, поэтому надеюсь на помощь экспертов.

$(function () {
    $('.slider').slick({
        arrows: true,
        dots: true,
        slidesToShow: 2,
        autoplay: true,
        speed: 1000,
        autoplaySpeed: 800,
        responsive: [
            {
                breakpoint: 1025,
                settings: {
                    slidesToShow: 1
                }
            },
            {
                breakpoint: 300,
                settings: {
                    slidesToShow: 1
                }
            },
        ]
    });
});

$(function () {
    $('.minimized').click(function (event) {
        var i_path = $(this).attr('src');
        $('body').append('<div id="overlay"></div><div id="magnify"><img src="' + i_path + '"><div id="close-popup"><i></i></div></div>');
        $('#magnify').css({
            left: ($(document).width() - $('#magnify').outerWidth()) / 2,
            // top: ($(document).height() - $('#magnify').outerHeight())/2 upd: 24.10.2016
            top: ($(window).height() - $('#magnify').outerHeight()) / 2
        });
        $('#overlay, #magnify').fadeIn('fast');
    });

    $('body').on('click', '#close-popup, #overlay', function (event) {
        event.preventDefault();

        $('#overlay, #magnify').fadeOut('fast', function () {
            $('#close-popup, #magnify, #overlay').remove();
        });
    });
});
* {
    margin: 0;
    padding: 0;
    font-family: Roboto;
}
.container{
    max-width: 1146px;
    margin: 0 auto;
}
.certificates{
    height: 510px;
    text-align: center;
}
.certificates_h{
    font-size: 36px;
    line-height: 42px;
    color: #1B1C20;
    padding: 50px 0 37px 0;
}
.certificates_box{
    padding-bottom: 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    outline: none;
}
.slick-slider{
    min-width: 0;
}
.slick-list {
    overflow: hidden;
    max-width: 947px;
    display: block !important;
}
.slick-track{
    display: flex;
    align-items: flex-start;
}
.slick-dots{
    display: none;
}
.slick-dots li{
    display: none;
}
.slick-dots button{
    display: none;
}
.slider {
    position: relative;
    outline: none;
    padding: 0 57px;
}
.slider .slick-arrow{
    position: absolute;
    top: 50%;
    margin: -14px 0px 0px 0px;
    z-index: 10;
    font-size: 0;
    width: 28px;
    height: 28px;
    border: none;
    transform: rotate(-45deg);
    outline: none;
}
.slider .slick-arrow.slick-next:hover{
    -webkit-box-shadow: 5px 5px 5px 0px rgba(108, 141, 255, 0.38); 
    box-shadow: 5px 5px 5px 0px rgba(108, 141, 255, 0.38);
    cursor: pointer;
}
.slider .slick-arrow.slick-prev:hover{
    -webkit-box-shadow: -5px -5px 5px 0px rgba(108, 141, 255, 0.38); 
    box-shadow: -5px -5px 5px 0px rgba(108, 141, 255, 0.38);
    cursor: pointer;
}
.slider .slick-arrow.slick-prev{
    left: 0;
    border-top: 2px solid #C4C4C4;
    border-left: 2px solid #C4C4C4;
    background: none;
}
.slider .slick-arrow.slick-next{
    right: 0;
    border-bottom: 2px solid #C4C4C4;
    border-right: 2px solid #C4C4C4;
    background: none;
}
.slider .slick-arrow.slick-disabled{
    opacity: 0.2;
}
.slider .slick-dots{
    align-items: center;
    justify-content: center;
}
.slider .slick-dots li{
    list-style: none;
    margin: 0px 10px;
}
.slider .slick-dots button{
    font-size: 0;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
}
.slider .slick-dots li.slick-active button{
    background-color: transparent;
    border: 1px solid #fff;
}
.slider_item {
    outline: none;
}
.slider_item img{
    max-width: 459px;
}
.minimized {
  cursor: pointer;
}

.minimized:hover {
    box-shadow: 0px 1px 10px 1px rgba(108, 141, 255, 0.38);
}

#magnify {
  display: none;

  position: fixed;
  max-width: 800px;
  height: auto;
  z-index: 9999;
}

#magnify img {
  width: 100%;
}

#overlay {
  display: none;

  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 9990;
}

#close-popup {
  width: 30px;
  height: 30px;

  background: #FFFFFF;
  border: 1px solid #AFAFAF;
  border-radius: 15px;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
}

#close-popup i {
  width: 30px;
  height: 30px;
  background: url(https://codernote.ru/files/cross.png) no-repeat center center;
  background-size: 16px 16px;
  display: block;
}

@keyframes rota {
 25% { transform: rotate(360deg); }
}

#close-popup:hover {
  animation: rota 4s infinite normal;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
<div class="certificates container">
            <a name="certificates_name"></a>
            <div class="certificates_h">Сертификаты</div>
            <div class="certificates_box">
                <div class="slider">
                    <div class="slider_item">
                        <img src="img/cer1.png" alt="photo" class="minimized">
                    </div>
                    <div class="slider_item">
                        <img src="img/cer2.png" alt="photo" class="minimized">
                    </div>
                    <div class="slider_item">
                        <img src="img/cer3.png" alt="photo" class="minimized">
                    </div>
                    <div class="slider_item">
                        <img src="img/cer4.png" alt="photo" class="minimized">
                    </div>
                </div>
            </div>
        </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <script type="text/javascript">$('.fz__minimized').litezoom({ speed: 400, viewTitle: true });</script>
    <script type="text/javascript" src="js/script.js"></script>


Ответы (0 шт):