Slick Slider некорректно отрабатывает в том случае, когда слайдер при загрузке страницы сразу скрывается. Пример:
HTML:
<div class="slide flag">
<div class="is-sale">-10%</div>
<div class="img"><img src="./images/hit-item-2.png"/></div>
<div class="type">Стул1</div>
<div class="name">Eames Style DSR PC</div>
<div class="price">
<div class="total">17900 ₽</div>
<div class="without-sale">27990 ₽</div>
</div>
<div class="hidding-info">
<div class="slider-inner">
<div class="same img"><img src="./images/hit-item-1.png"/></div>
<div class="same img"><img src="./images/hit-item-2.png"/></div>
<div class="same img"><img src="./images/hit-item-1.png"/></div>
</div>
<button class="add-cart btn">Добавить в корзину</button>
<button class="btn one-click">Купить в одни клик</button>
</div>
</div>
CSS(scss):
.hidding-info {
padding-bottom: 20px;
top: 353px;
background-color: $font-white;
.slider-inner {
.same {
margin-right: 3px;
}
display: flex;
justify-content: center;
}
.one-click {
margin-bottom: 20px;
background-color: $bg-gray;
border-color: $bg-gray;
&:hover {
background-color: $bg-gray-hover;
border-color: $bg-gray-hover;
}
}
}
.slick-slide {
float: left;
}
JavaScript:
$(document).ready(function(){
$('.catalogue .slide').hover(function(){
if($(this).children('.hidding-info').hasClass('show')
){
$(this)
.children('.hidding-info').css({
'position': 'relative',
'z-index' : '0',
})
.removeClass('show').hide();
} else {
$(this)
.children('.hidding-info').css({
'position': 'absolute',
'top': '405px',
'z-index' : '100',
'padding-top': '20px',
})
.addClass('show').show();
}
});
$('.slider-inner').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
fade: false,
vertical: false
});
});
В итоге все это разворачивается в:
<div class="slider-inner slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="same img slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 0px;">
<img src="./images/hit-item-1.png">
</div>
<div class="same img slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 0px;">
<img src="./images/hit-item-2.png">
</div>
<div class="same img slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 0px;">
<img src="./images/hit-item-1.png">
</div>
</div>
</div>
</div>
При этом:
Почему так?
Слайдер нужно инициализировать после того, как появляется блок в котором он находится
$(document).ready(function(){
$('.catalogue .slide').hover(function(){
if($(this).children('.hidding-info').hasClass('show')
){
$(this)
.children('.hidding-info').css({
'position': 'relative',
'z-index' : '0',
})
.removeClass('show').hide();
} else {
$(this)
.children('.hidding-info').css({
'position': 'absolute',
'top': '405px',
'z-index' : '100',
'padding-top': '20px',
})
.addClass('show').show();
$('.slider-inner').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
fade: false,
vertical: false
});
}
});
});
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
На странице имеется несколько элементов с таким набором классовМне необходимо распарсить все и из каждого элемента вытянуть ссылку
Есть кнопкаПри нажатии по ней запускается обратный таймер