Slick Slider 实现可变宽度滑块的匀速滚动效果-html教程-PHP中文网

Slick Slider 实现可变宽度滑块的匀速滚动效果

本文介绍如何在 Slick Slider 中启用 variableWidth: true 时，让每个滑块按自身宽度比例动态调整切换时长，从而实现视觉上恒定线速度（smooth scroll）的滚动效果。

本文介绍如何在 slick slider 中启用 variablewidth: true 时，让每个滑块按自身宽度比例动态调整切换时长，从而实现视觉上恒定线速度（smooth scroll）的滚动效果。

在使用 Slick Slider 构建响应式画廊时，若启用 `variableWidth: true`，默认的 `autoplaySpeed` 会以固定毫秒数切换每张幻灯片——这会导致宽图“闪退”、窄图“拖沓”，破坏视觉连贯性。真正平滑的滚动应满足：**单位时间内滑动的像素距离恒定**，即线速度一致。为此，需为每张幻灯片单独计算过渡时长：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?x-oss-process=image/resize,p_40" alt="slide"><img src="https://placehold.co/100x100/00ff00/FFF?x-oss-process=image/resize,p_40" alt="slide"><img src="https://placehold.co/100x100/0000ff/FFF?x-oss-process=image/resize,p_40" alt="slide">
</div>

<div class="gallery2">
  <!-- 可变宽度示例：含 50px、100px、600px、1600px 等不同尺寸 -->
  <img class="slide" src="https://placehold.co/100x100?x-oss-process=image/resize,p_40" alt="slide"><img class="slide" src="https://placehold.co/100x100/00ff00/FFF?x-oss-process=image/resize,p_40" alt="slide"><img class="slide" src="https://placehold.co/100x100/0000ff/FFF?x-oss-process=image/resize,p_40" alt="slide"><img class="slide" src="https://placehold.co/600x100/00ff00/FFF?x-oss-process=image/resize,p_40" alt="slide"><img class="slide" src="https://placehold.co/1600x100/0000ff/FFF?x-oss-process=image/resize,p_40" alt="slide"><img class="slide" src="https://placehold.co/50x100/ff0000/FFF?x-oss-process=image/resize,p_40" 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();
});

✅ 关键要点说明：