Slick slider - smooth scroll with different slide widths

Question

I'd like to build a smooth scroll slider (Slick slider) when I have different slide widths (variableWidth: true).

Is there a way that my 2nd slider will have the same speed all time (as the first slider with equal slide widths).

$('.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

You are asking how to make each slide have its own speed. Later we will calculate the correct time for each slide - obviously proportional to the width of the slide.

In order to dynamically set speed, use slider2.slick('slickSetOption', 'speed', duration).

To have more control I use timeout and manually call slickNext. The idea is from this answer. However possibly a better idea is to use events.

// 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>