如何将物品放在Slick Carousel中？

Question

我正在使用Slick Carousel,但有一个布局痒,我无法划伤.当我的物品数量少于旋转木马可以同时显示的物品时,它们是左对齐的.我希望他们能够集中精力.例如slidesToShow,我得到的是3等且只有2个项目

-------------------
 IIIII IIIII
-------------------

当我想要的是

-------------------
    IIIII IIIII
-------------------

或者如果只有1个项目:

-------------------
       IIIII
-------------------

我尝试过设置centerMode,但这是完全不同的效果.

有没有办法得到我想要的效果？它需要slidesToShow通过响应断点来减少处理.

Answer 1

快速检查轮播的DOM显示项目放在类中的元素中slick-track.可以通过修改该元素的边距来居中项目:

.slick-track {
    margin:auto;
}

演示这个JSFiddle.

请注意,在最后一项处于活动状态时,演示中的轮播有时会在调整大小时停止正常工作,但无论此CSS修改如何都会发生这种情况.

Answer 2

贴上margin:0 auto;标签<img>对我有用。

例如，

<div class="items">
    <div>
        <img src="https://via.placeholder.com/25x50" />
    </div>
    <div>
        <img src="https://via.placeholder.com/25x50" />
    </div>
    <div>
        <img src="https://via.placeholder.com/25x50" />
    </div>
<div>

CSS

.items { background:red; }
.items img { margin:0 auto; }

https://jsfiddle.net/cegor9j2/