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>
