当variableWidth为true时，如何居中Slick轮播的可变宽度元素？

问题描述 #

使用Slick实现可变宽度元素的轮播，希望在所有元素可见时让滑块居中。HTML结构如下：

<div class="slider center-elements">
    <div><h3>item 1</h3></div>
</div>

<div class="slider center-elements">
    <div><h3>element 1</h3></div>
    <div><h3>elem 2</h3></div>
</div>

<div class="slider center-elements">
    <div><h3>ab</h3></div>
    <div><h3>abc</h3></div>
    <div><h3>abcd</h3></div>
    <div><h3>foo</h3></div>
    <div><h3>bar</h3></div>
    <div><h3>xyz</h3></div>
    <div><h3>abcxyz</h3></div>
    <div><h3>8</h3></div>
</div>

尝试设置.slick-track的margin:auto但无效：

.slick-track {
    margin: auto;
}

解决方案 #

方案一：调整轨道宽度实现居中 #

Slick会动态给.slick-track设置width:100%，强制轨道占满容器宽度，导致margin:auto无法生效。通过覆盖宽度属性，让轨道自适应内容宽度后再居中：

.center-elements .slick-track {
  width: fit-content !important;
  margin: 0 auto;
}

方案二：利用Flex布局对齐 #

.slick-track本身默认是flex容器，直接通过flex对齐属性实现内部元素居中，无需修改宽度，也不需要!important：

.center-elements .slick-track {
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者Ndx