Slick滑块：如何让首个元素始终与初始内容宽度一致

数据老陈

2026-8-2

解决Slick滑块首个元素宽度保持初始值的问题

问题背景

我们使用Slick滑块实现可变宽度效果，当前滑块效果如图：
当前效果截图

期望实现首个元素始终保持初始宽度并左对齐的效果，如图：
期望效果截图

HTML代码

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/prism.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<script src="https://kenwheeler.github.io/slick/js/native.js" type="text/javascript"></script>

<div class="slider variable-width">
  <div style="width: 200px;background-color:red;">
    <p>200</p>
  </div>
  <div style="width: 200px;background-color:red;">
    <p>175</p>
  </div>
  <div style="width: 200px;background-color:red;">
    <p>150</p>
  </div>
  <div style="width: 200px;background-color:red;">
    <p>300</p>
  </div>
  <div style="width: 200px;background-color:red;">
    <p>225</p>
  </div>
  <div style="width: 200px;background-color:red;">
    <p>125</p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/js/scripts.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/js/prism.js"></script>

无关的Disqus代码

var disqus_shortname = 'slickcarousel';

(function () {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

解决方案

1. 修正滑块元素的宽度定义

你当前所有滑块子元素都设置了width:200px，这和内部标注的宽度数值矛盾，先把每个元素的宽度改成对应数值：

<div class="slider variable-width">
  <div style="width: 200px;background-color:red;">
    <p>200</p>
  </div>
  <div style="width: 175px;background-color:red;">
    <p>175</p>
  </div>
  <div style="width: 150px;background-color:red;">
    <p>150</p>
  </div>
  <div style="width: 300px;background-color:red;">
    <p>300</p>
  </div>
  <div style="width: 225px;background-color:red;">
    <p>225</p>
  </div>
  <div style="width: 125px;background-color:red;">
    <p>125</p>
  </div>
</div>

2. 调整Slick初始化参数

问题核心是默认初始化可能开启了centerMode（居中模式），导致第一个元素被缩放或偏移。直接在页面末尾添加自定义初始化代码（替代原scripts.js的初始化）：

$('.variable-width').slick({
  variableWidth: true, // 启用可变宽度
  centerMode: false, // 关闭居中模式，让元素左对齐
  slidesToShow: 1, // 初始显示1个元素
  slidesToScroll: 1,
  infinite: false, // 关闭无限滚动，避免第一个元素被隐藏
  arrows: true // 显示箭头控制
});

3. 移除默认样式干扰

添加自定义CSS消除滑块容器的默认内边距：

.variable-width {
  padding: 0 !important;
}
.variable-width .slick-slide {
  float: left;
  height: auto;
}

完整可运行代码

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/css/prism.css" />
<style>
  .variable-width {
    padding: 0 !important;
  }
  .variable-width .slick-slide {
    float: left;
    height: auto;
  }
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<script src="https://kenwheeler.github.io/slick/js/native.js" type="text/javascript"></script>

<div class="slider variable-width">
  <div style="width: 200px;background-color:red;">
    <p>200</p>
  </div>
  <div style="width: 175px;background-color:red;">
    <p>175</p>
  </div>
  <div style="width: 150px;background-color:red;">
    <p>150</p>
  </div>
  <div style="width: 300px;background-color:red;">
    <p>300</p>
  </div>
  <div style="width: 225px;background-color:red;">
    <p>225</p>
  </div>
  <div style="width: 125px;background-color:red;">
    <p>125</p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/js/prism.js"></script>
<script type="text/javascript">
  $('.variable-width').slick({
    variableWidth: true,
    centerMode: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    arrows: true
  });
</script>

这样设置后，首个滑块元素会保持200px的初始宽度并左对齐，完全匹配你的期望效果。

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