Почему slick-slider вместо одного слайда показывает все?

Question

[Андрей Чирков]

Почему когда я задал показ 1 слайда, он показывает абсолютно все?
Даже если не задавать ширину, он всеравно должен показывать 1.
Кто знает, в чем проблема?



КОД HTML :

<div class="slider-logo">
   <h2 class="slider-logo__title">Test One</h2>
   <h2 class="slider-logo__title">Test Two</h2>
   <h2 class="slider-logo__title">Test Three</h2>
  </div>

КОД CSS:

.slider-logo {
 display: flex;
 flex-wrap: wrap;
 width: 200px;
 .slider-logo__title {
  font-size: 35px;
  color:@white_color;
 }
}

.slick-track {
 display: flex;
}

КОД JS:

$('.slider-logo').slick({
 slidesToShow: 1,
 arrows: false,
 autoplay: true,
 autoplaySpeed:500,
});

Comments

[fallus]

Не советую кастомизировать слайдеры, задавая им подобные свойства:

display: flex;
flex-wrap: wrap;

Попробуйте это убрать и посмотреть на то, сколько слайдов отобразится.

Answer 1

[bingumd]

Может .slider-logo задать свойство overflow: hidden;?

Comments

[Андрей Чирков]

большое спасибо, не догадался бы, я думал это предусмотрено слайдером

Answer 2

[Виталий Першин]

1. Не надо вешать свои стили на слайдер и на слайды, делайте для слайда пустой div и в него помещайте свой блок
2. Подключите стили самого slick

Comments

[Андрей Чирков]

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

[Виталий Першин]

Андрей Чирков, Там не так много лишнего, слик использует свои классы, которые добавляет при инициализации. смотрите что вы точно не будете использовать и убирайте, стрелки, точки, ориентацию и т.д..