Как расположить слайды slick.js по всей ширине контейнера?

Question

Проблема с расстановкой слайдов в slick.js.

У каждого слайда есть margin-right (1 и 2 скрины).

Если бы не слайдер, я бы написал "display: flex; justify-content: space-between" для контейнера.

Со слайдером перепробовал все и не нашел решения. Что делать?

Answer 1

Можно использовать трюк с отрицательным margin

$('.slider').slick({
  slidesToShow: 5
})

*{
  box-sizing: border-box;
}
.slider{
  overflow: hidden;
}
.slider .slick-list{
  margin: 0 -30px;
}
.slide{
  background-color: gray;
  font-size:30px;
  line-height: 2;
  text-align:center;
  font-weight:bold;
  margin: 0 30px;
}
.slide:focus{
  outline: none;
}

<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
  <div class="slide">6</div>
  <div class="slide">7</div>
  <div class="slide">8</div>
  <div class="slide">9</div>
</div>

БЛОГ НА HUSL

Как расположить слайды slick.js по всей ширине контейнера?

Ответы (1 шт):