Как сделать, чтобы ширина итемов всегда была одинакова независимо от количества?

Question

скролю (через тач) - слайды меняются но в последнем ряде сбивается ширина ( если не хватает элементов для количества по 3 в ряд)

можно конечно через разметку добавить пустые дивы но может есть вариант получше?

let clients_slider = $('.clients__holder');
clients_slider.slick({
    slidesPerRow: 3,
    rows: 3,
    slidesToScroll: 1,
    dots: false,
    arrows: true,
    appendArrows: $('.clients__arrows'),
    prevArrow: '<button class="clients__arrow clients__arrow--dir_left"></div>',
    nextArrow: '<button class="clients__arrow clients__arrow--dir_right"></button>',

    responsive: [{
            breakpoint: 460,
            settings: {
               slidesPerRow: 2,
               rows: 4
            }
        }
    ]
});

.clients__box {
  outline: 1px solid red;
  margin: 0 40px;
  margin-bottom: 20px;
}

.clients__holder {
  margin: 0 -40px;
}

.slick-slide>div {
  display: flex;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>


<div class="clients__holder">

  <div class="clients__box">
    1
  </div>
  <div class="clients__box">
    2
  </div>
  <div class="clients__box">
    3
  </div>
  <div class="clients__box">
    4
  </div>
  <div class="clients__box">
    5
  </div>
  <div class="clients__box">
    6
  </div>
  <div class="clients__box">
    7
  </div>
  <div class="clients__box">
    8
  </div>
  <div class="clients__box">
    9
  </div>
  <div class="clients__box">
    10
  </div>
  <div class="clients__box">
    11
  </div>
  <div class="clients__box">
    12
  </div>
  <div class="clients__box">
    13
  </div>


</div>
<!--end clients__holder-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

Answer 1

Попробуйте использовать grid.

let clients_slider = $('.clients__holder');
clients_slider.slick({
  slidesPerRow: 3,
  rows: 3,
  slidesToScroll: 1,
  dots: false,
  arrows: true,
  appendArrows: $('.clients__arrows'),
  prevArrow: '<button class="clients__arrow clients__arrow--dir_left"></div>',
  nextArrow: '<button class="clients__arrow clients__arrow--dir_right"></button>',

  responsive: [{
    breakpoint: 460,
    settings: {
      slidesPerRow: 2,
      rows: 4
    }
  }]
});

body {
  padding: 0;
  margin: 0;
}

.clients__box {
  outline: 1px solid red;
}

.clients__holder {
  margin: 0 -40px;
}

.slick-slide {
  border: 1px dashed purple;
}

.slick-slide>div {
  box-sizing: border-box;
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin: 20px 0;
  padding: 0 60px;
}

.clients__box {
  width: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />


<div class="clients__holder">

  <div class="clients__box">1</div>
  <div class="clients__box">2</div>
  <div class="clients__box">3</div>
  <div class="clients__box">4</div>
  <div class="clients__box">5</div>
  <div class="clients__box">6</div>
  <div class="clients__box">7</div>
  <div class="clients__box">8</div>
  <div class="clients__box">9</div>
  <div class="clients__box">10</div>
  <div class="clients__box">11</div>
  <div class="clients__box">12</div>
  <div class="clients__box">13</div>

</div>
<!--end clients__holder-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

БЛОГ НА HUSL

Как сделать, чтобы ширина итемов всегда была одинакова независимо от количества?

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