光滑的滑块 - 具有不同滑动宽度的平滑滚动

Question

当我有不同的幻灯片宽度（variableWidth：true）时，我想构建一个平滑的滚动滑块（Slick slider）。

有没有办法让我的第二个滑块始终具有相同的速度（与第一个滑块具有相同的滑块宽度）。

$('.gallery').slick({
  arrows: false,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed: 0,
  speed: 3000,
  pauseOnHover: false,
  cssEase: 'linear',
  infinite: true
});

.gallery {
margin-bottom: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Answer 1

您问如何使每张幻灯片都有自己的速度。稍后我们将计算每张幻灯片的正确时间 - 显然与幻灯片的宽度成正比。

要动态设置速度，请使用

slider2.slick('slickSetOption', 'speed', duration)

。

为了获得更多控制，我使用超时并手动调用

slickNext

。这个想法来自这个答案。然而，更好的主意可能是使用事件。

// waiting for load so that images fully loaded
window.addEventListener('load', function(ev) {
  var SPEED = 2000
  var WIDTH = 100
  var imageList = [...document.querySelectorAll('.gallery2 .slide')]

  var slider = $('.gallery').slick({
    arrows: false,
    variableWidth: true,
    autoplay: true,
    autoplaySpeed: 0,
    speed: SPEED,
    pauseOnHover: false,
    cssEase: 'linear',
    infinite: true
  });

  var slider2 = $('.gallery2').slick({
    arrows: false,
    variableWidth: true,
    autoplay: false, // false
    autoplaySpeed: 0,
    speed: SPEED,
    pauseOnHover: false,
    cssEase: 'linear',
    infinite: true
  });

  var widthList = imageList.map(function(item) {
    return item.width
  });



  var slideIndex = 0;
  var changeSlide = function() {
    var duration = SPEED / WIDTH * widthList[slideIndex++]
    slider2.slick('slickSetOption', 'speed', duration)
    slider2.slick('slickNext');
    if (slideIndex >= widthList.length) {
      slideIndex = 0;
    }
    setTimeout(changeSlide, duration);
  }

  changeSlide();


})

.gallery {
  margin-bottom: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.min.js"></script>
<div class="gallery">
  <img src="https://placehold.co/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="https://placehold.co/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="gallery2">
  <img class="slide" src="https://placehold.co/100x100">
  <img class="slide" src="https://placehold.co/100x100/00ff00/FFF">
  <img class="slide" src="https://placehold.co/100x100/0000ff/FFF">
  <img class="slide" src="https://placehold.co/600x100/00ff00/FFF">
  <img class="slide" src="https://placehold.co/1600x100/0000ff/FFF">
  <img class="slide" src="https://placehold.co/50x100/ff0000/FFF">
  <img class="slide" src="https://placehold.co/100x100">
  <img class="slide" src="https://placehold.co/600x100/00ff00/FFF">
  <img class="slide" src="https://placehold.co/1600x100/0000ff/FFF">
  <img class="slide" src="https://placehold.co/50x100/ff0000/FFF">
</div>