本文介绍如何在 Slick Slider 中启用 variableWidth: true 时，让每个滑块按自身宽度比例动态调整切换时长，从而实现视觉上恒定线速度（smooth scroll）的滚动效果。
本文介绍如何在 slick slider 中启用 variablewidth: true 时，让每个滑块按自身宽度比例动态调整切换时长，从而实现视觉上恒定线速度（smooth scroll）的滚动效果。
duration = baseSpeed × (slideWidth / baseWidth)。
以下是一个完整、可运行的解决方案：
<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="https://placehold.co/100x100" alt="slide"> <img src="https://placehold.co/100x100/00ff00/FFF" alt="slide"> <img src="https://placehold.co/100x100/0000ff/FFF" alt="slide"> </div> <div class="gallery2"> <!-- 可变宽度示例：含 50px、100px、600px、1600px 等不同尺寸 --> <img class="slide" src="https://placehold.co/100x100" alt="slide"> <img class="slide" src="https://placehold.co/100x100/00ff00/FFF" alt="slide"> <img class="slide" src="https://placehold.co/100x100/0000ff/FFF" alt="slide"> <img class="slide" src="https://placehold.co/600x100/00ff00/FFF" alt="slide"> <img class="slide" src="https://placehold.co/1600x100/0000ff/FFF" alt="slide"> <img class="slide" src="https://placehold.co/50x100/ff0000/FFF" alt="slide"> </div>
window.addEventListener('load', function () {
const BASE_SPEED = 2000; // 基准速度（ms），对应基准宽度
const BASE_WIDTH = 100; // 基准宽度（px），如 100px 宽 slide 耗时 2000ms
// 初始化两个 slider：第一个为常规等宽演示；第二个为可变宽+匀速核心逻辑
$('.gallery').slick({
arrows: false,
variableWidth: true,
autoplay: true,
autoplaySpeed: 0,
speed: BASE_SPEED,
pauseOnHover: false,
cssEase: 'linear',
infinite: true
});
const $slider2 = $('.gallery2');
$slider2.slick({
arrows: false,
variableWidth: true,
autoplay: false, // 关闭自动播放，由手动控制
speed: BASE_SPEED,
pauseOnHover: false,
cssEase: 'linear',
infinite: true
});
// 获取所有 slide 元素并测量其渲染后宽度（确保图片已加载）
const slides = Array.from($slider2.find('.slide'));
const widthList = slides.map(el => el.offsetWidth);
let currentIndex = 0;
function advanceSlide() {
const currentWidth = widthList[currentIndex];
const duration = Math.max(300, Math.round(BASE_SPEED * currentWidth / BASE_WIDTH)); // 最小 300ms 防止过快
// 动态设置本次切换速度，并执行下一帧
$slider2.slick('slickSetOption', 'speed', duration, true);
$slider2.slick('slickNext');
currentIndex = (currentIndex + 1) % widthList.length;
setTimeout(advanceSlide, duration);
}
// 启动轮播
advanceSlide();
});✅ 关键要点说明：
- 必须在
window.load或imagesLoaded后执行，确保<img alt="Slick Slider 实现可变宽度滑块的匀速滚动效果" >渲染完成、offsetWidth获取准确； - 使用
slickSetOption('speed', value, refresh)的第三个参数true强制刷新配置，避免缓存失效； - 手动调用
slickNext()替代内置 autoplay，才能实现逐帧精度控制； - 添加
Math.max(300, ...)限制最小动画时长，避免极窄元素（如 10px）导致瞬切失真； - 若需暂停/恢复，可封装
clearTimeout+ 重置定时器，或监听beforeChange事件做状态管理。
该方案不依赖第三方插件，纯原生 JS + Slick API 实现，兼容主流浏览器，是构建高端产品画廊、品牌展示页的理想实践。
