如何在 Slick Carousel 中将项目居中？

Question

我正在使用 Slick Carousel，但有一个布局问题我无法解决。当我的项目少于轮播一次可以显示的项目时，它们是左对齐的。我希望它们居中。例如，slidesToShow 等于 3 且只有 2 个项目，我得到

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

当我想要的是

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

或者如果只有 1 项：

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

我试过设置centerMode，但这是完全不同的效果。

有没有办法达到我想要的效果？它需要处理 slidesToShow 被响应断点减少。

Answer 1

快速检查轮播的 DOM 表明项目被放入具有 class 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/

如何在 Slick Carousel 中将项目居中？

How can I center items in Slick Carousel?

javascript

carousel

slick.js