Using slick slider with border?

Question

css

Good afternoon. This is not the first time I've used the slick slider. From what I understand, it's quite popular. Faced a problem now. Slider elements have borders. So there is a feeling that the calculation of the width of the element goes without taking them into account, so the last border on the right is swallowed. Question: how can this problem be overcome?

Answer 1

The solution is simple, just don't add margin and border to the element that slick adds the .slick-slide class to.
In other words, wrap all slides with a div without styles.

...
<div class="slick-slide"> <!-- этому блоку не добавляем отступы и border-->
    <div class="slide__inner"> <!-- добавляем блок внутрь здесь можно делать всё что нужно -->
    ...
    </div>
</div>
...

Answer 2

Yes the code is simple

<div class="info-panel-content-tab-content-items">
<a class="info-panel-content-tab-content-item" href="#">
  <div class="info-panel-content-tab-content-item-delete">
    <div class="ico"></div>
  </div>
  <span class="info-panel-content-tab-content-item-img" href="#"><img src="img/info.jpg" alt="инфо"></span>
  <span class="info-panel-content-tab-content-item-title">Phantom PH1110 с фонарем</span>
  <span class="info-panel-content-tab-content-item-price">8 960 р.</span>
</a>
<a class="info-panel-content-tab-content-item" href="#">
  <div class="info-panel-content-tab-content-item-delete">
    <div class="ico"></div>
  </div>
  <span class="info-panel-content-tab-content-item-img" href="#"><img src="img/info.jpg" alt="инфо"></span>
  <span class="info-panel-content-tab-content-item-title">Phantom PH1110 с фонарем</span>
  <span class="info-panel-content-tab-content-item-price">8 960 р.</span>
</a>
</div>

And there are 10 such blocks in info-panel-content-tab-content-items
Initialization is also simple

$('.info-panel-content-tab-content-items').slick({
        slidesToShow: 8,
        slidesToScroll: 1,
        swipe: false
    });

Answer 3

Also faced this problem. As far as I understand, this is a bug of this slider, it rounds the width and such an unpleasant effect is obtained.