В слайдере 10 слайдов. За раз выводится 3 слайда, при скролле листается на 1 слайд.
Проблема - когда долистываем на 8 слайд, справа начинается пустое место на 9 и 10 слайде.
Потом листаем на 9, пустое место на 10 и 1-м который во втором круге.
Потом листаем на 10, пустое место на месте 1-го и 2-го второго круга.
Листаем потом дальше и появляются сразу все 3 слайда в ряд, как должно быть.
То есть - от куда-то берется пустое место, хотя должен отображаться второй круг первых слайдов.
JS$(document).ready(function(){
$('.slider-command').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
infinite: true, // Зробити слайдер безкінечним
autoplaySpeed: 10000,
prevArrow: $('.next-slide-02'),
nextArrow: $('.prev-slide-02'),
responsive: [
{
breakpoint: 1151,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 950,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
CSS.command .slider-command {
margin-right: -15px;
}
.command .slider-command .slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 15px;
padding: 20px 50px;
width: 30%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.command .slider-command .slide:hover {
-webkit-box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.5);
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.5);
}
HTML<div class="slider-command mt40">
<!-- СЛАЙД 1 ДЛЯ ПРИМЕРА -->
<div class="slide element-animation-2">
<div class="photo-people">
<span><img src="/{$listCommand.photoPeople}" alt="{$listCommand.namePeople} ({$listCommand.agePeople}) | KiteSafari Fun" class="photo"></span>
<div class="position">{$listCommand.postPeople}</div>
<img src="/img/wave.png" alt="wave kitesafari" class="wave">
</div>
<div class="info-people mt40">
<div class="title">
<img src="/{$listCommand.flageCountryPeople}" alt="country {$listCommand.namePeople}" class="flag-country">
<span class="name">{$listCommand.namePeople} ({$listCommand.agePeople})</span>
</div>
<div class="lang mt10">
<span class="icon-planet"></span>
<span class="list-lang">{$listCommand.langPeople}</span>
</div>
<div class="description mt20">
{$listCommand.descriptionPeople}
</div>
</div>
</div>
<!-- СЛАЙД 2 ДЛЯ ПРИМЕРА -->
<div class="slide element-animation-2">
<div class="photo-people">
<span><img src="/{$listCommand.photoPeople}" alt="{$listCommand.namePeople} ({$listCommand.agePeople}) | KiteSafari Fun" class="photo"></span>
<div class="position">{$listCommand.postPeople}</div>
<img src="/img/wave.png" alt="wave kitesafari" class="wave">
</div>
<div class="info-people mt40">
<div class="title">
<img src="/{$listCommand.flageCountryPeople}" alt="country {$listCommand.namePeople}" class="flag-country">
<span class="name">{$listCommand.namePeople} ({$listCommand.agePeople})</span>
</div>
<div class="lang mt10">
<span class="icon-planet"></span>
<span class="list-lang">{$listCommand.langPeople}</span>
</div>
<div class="description mt20">
{$listCommand.descriptionPeople}
</div>
</div>
</div>
</div>
Средний