如何在 Slick 轮播中将 2 张幻灯片居中？答案

【问题标题】：How to center 2 slides in Slick carousel?如何在 Slick 轮播中将 2 张幻灯片居中？
【发布时间】：2017-02-06 08:53:55
【问题描述】：

我在我的项目中使用Slick，我需要将两张幻灯片居中。不幸的是，centerMode 选项仅适用于奇数编号的slidesToShow 计数。我尝试通过 CSS 将活动幻灯片居中，但没有效果。

您知道任何解决方案吗？提前谢谢！

编辑：

我想在较小的屏幕上放置 1 个居中的项目，接下来是 2 个、3 个等。非活动幻灯片的不透明度较低。

【问题讨论】：

我不认为 slick carousel 设计用于将 2 张幻灯片居中。要么您找到另一个提供您想做的事情的轮播，要么制作自己的轮播。
我知道 Slick 默认没有这个选项。问题是我现在在项目的其他几个地方使用 Slick，我想用一个插件来做所有的轮播。从 Slick 的一位贡献者那里，我得到了信息：“有一种方法可以用 css 和 js 确定两个活动幻灯片的中心”，但没有详细信息。所以我希望这里有人知道解决方案:)
请发布您迄今为止编写的代码的工作示例，以便我们找到解决您问题的方法。
我在主帖中添加了一个示例。

【解决方案1】：

使用variableWidth 可以使用带有两张幻灯片的光滑轮播中心模式，您必须为每张幻灯片设置宽度。之后，您必须将slick-track 移动到光滑幻灯片的一半宽度。

【讨论】：

【解决方案2】：

除了使用centerMode 属性之外，还可以通过将.slick-track 的水平边距设置为auto 来使Slick Carousel 幻灯片居中。

.slick-track {
  margin-left: auto;
  margin-right: auto
 }

【讨论】：