@sasha_jarvi

Возможно ли сделать такой слайдер при помощи slick-slider?

Всем привет. Имеется следующий блок:

5fe0e8055e8ab721663667.jpeg

Как видно, здесь нужно сделать слайдер с бесконечной прокруткой, при этом в нём должны отображаться все три слайда, из которых он состоит, и активный слайд должен быть крупнее остальных. Пытался это осуществить с помощью slick.js, однако при выставлении значения slidesToShow, равному числу слайдов, слайдер перестаёт работать. Как решить данную проблему?

Код:

<body>
  <div class="stats-slider">
    <div class="stats-slider__item">
      <img src="https://i.postimg.cc/vHHXRFjw/stats-1.jpg" alt="" class="stats-slider__img">
    </div>
    <div class="stats-slider__item">
      <img src="https://i.postimg.cc/hPyscZWz/stats-2.jpg" alt="" class="stats-slider__img">
    </div>
    <div class="stats-slider__item">
      <img src="https://i.postimg.cc/W1dn3mT9/stats-3.jpg" alt="" class="stats-slider__img">
    </div>
  </div>
</body>


body {
  padding: 60px 0;
  
  background: lightblue;
}

.stats-slider {
  margin: 0 auto;
  width: 1000px;
  
  &__item {
    width: 275px !important;
    height: 400px;
  }
  
  &__img {
    max-width: 100%;
    height: auto;
    
    object-fit: cover;
  }
}


const statsSlider = $('.stats-slider');

statsSlider.slick({
  infinite: true,
  slidesToShow: 3,
  centerMode: true,
  slidesToScroll: 1
})


Фиддл: https://jsfiddle.net/movy9t83/12/
  • Вопрос задан
  • 243 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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