@sergei179

Почему Slick Slider показывает пустые слайды в конце?

В слайдере 10 слайдов. За раз выводится 3 слайда, при скролле листается на 1 слайд.

Проблема - когда долистываем на 8 слайд, справа начинается пустое место на 9 и 10 слайде.
Потом листаем на 9, пустое место на 10 и 1-м который во втором круге.
Потом листаем на 10, пустое место на месте 1-го и 2-го второго круга.

Листаем потом дальше и появляются сразу все 3 слайда в ряд, как должно быть.

То есть - от куда-то берется пустое место, хотя должен отображаться второй круг первых слайдов.

Как это убрать?
663e309743083741846217.png
663e3107d9584142984154.png


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>
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы