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/

如何将物品放在Slick Carousel中？

2 个答案: