Slick滑块：不同幻灯片宽度下实现匀速平滑滚动

当开启variableWidth: true时，Slick的speed参数是完成一次完整滚动循环的时长，而非滚动速度（像素/秒）。因此，内容总宽度不同的滑块，即使设置相同的speed，实际滚动速度也会不一样——总宽度越长，滚动越快。

要让第二个滑块和第一个等宽滑块保持相同的滚动速度，我们需要根据两个滑块的内容总宽度，按比例调整第二个滑块的speed值，确保两者的像素滚动速率（总宽度/滚动时长）一致。

具体实现步骤 #

1. 初始化所有Slick滑块，保留第一个滑块的基准speed值。
2. 获取第一个滑块的内容总宽度（即.slick-track的宽度）。
3. 获取第二个滑块的内容总宽度。
4. 根据宽度比例计算第二个滑块应有的speed值，并更新滑块配置。

修改后的代码 #

JavaScript

// 初始化所有滑块
const $galleries = $('.gallery').slick({
  arrows: false,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed: 0,
  speed: 3000,
  pauseOnHover: false,
  cssEase: 'linear',
  infinite: true
});

// 获取第一个滑块的基准参数
const firstGallery = $galleries.eq(0);
const baseSpeed = firstGallery.slick('getOption', 'speed');
const baseTrackWidth = firstGallery.find('.slick-track').width();

// 计算并更新第二个滑块的speed
const secondGallery = $galleries.eq(1);
const secondTrackWidth = secondGallery.find('.slick-track').width();
const adjustedSpeed = (secondTrackWidth / baseTrackWidth) * baseSpeed;

secondGallery.slick('setOption', 'speed', adjustedSpeed, true);

CSS

.gallery {
  margin-bottom: 20px;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="gallery">
  <img src="http://placehold.it/100x100">
  <img src="https://placehold.co/100x100/00ff00/FFF">
  <img src="https://placehold.co/100x100/0000ff/FFF">
  <img src="https://placehold.co/100x100/ff0000/FFF">
  <img src="http://placehold.it/100x100">
  <img src="https://placehold.co/100x100/00ff00/FFF">
  <img src="https://placehold.co/100x100/0000ff/FFF">
  <img src="https://placehold.co/100x100/ff0000/FFF">
</div>
<div class="gallery">
  <img src="http://placehold.it/100x100">
  <img src="https://placehold.co/100x100/00ff00/FFF">
  <img src="https://placehold.co/100x100/0000ff/FFF">
  <img src="https://placehold.co/600x100/00ff00/FFF">
  <img src="https://placehold.co/1600x100/0000ff/FFF">
  <img src="https://placehold.co/50x100/ff0000/FFF">
  <img src="http://placehold.it/100x100">
  <img src="https://placehold.co/600x100/00ff00/FFF">
  <img src="https://placehold.co/1600x100/0000ff/FFF">
  <img src="https://placehold.co/50x100/ff0000/FFF">
</div>

原理说明 #

• baseSpeed是第一个滑块的滚动时长（3000ms），baseTrackWidth是第一个滑块所有内容的总宽度。
• 第二个滑块的总宽度secondTrackWidth与baseTrackWidth的比值，就是两个滑块滚动时长需要调整的比例。
• 通过slick('setOption', 'speed', adjustedSpeed, true)实时更新第二个滑块的滚动时长，确保两者的滚动速率一致。

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