'Speed in slick carousel slider is not permanent when sliders have different width

I'm trying to make analog of with images and videos using slick carousel in vue (nuxt). It works fine when images are the same width, but when width is different - speed seems to be unpredictable.

How to make sliders with different width go one after another with the same speed and no stop?

This is my example:

$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 3,
    variableWidth: true,
    cssEase: 'linear',
    autoplay: true,
    autoplaySpeed: 0,
    speed: 1000
  });
});

.wrapper {
  border: 1px solid blue;
  overflow: hidden;
}

.slider {
  border: 1px solid red;
  box-sizing: border-box;
}

.item {
  box-sizing: border-box;
  border: 1px solid red;
}

.item_300 {
  width: 300px;
}

.item_500 {
  width: 500px;
}

.item_600 {
  width: 600px;
}

.item_200 {
  width: 200px;
}

<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css"/>
</head>

<section class="wrapper">
  <div class="slider">
    <div class="item item_300"><h3>1</h3></div>
    <div class="item item_500"><h3>2</h3></div>
    <div class="item item_300"><h3>3</h3></div>
    <div class="item item_500"><h3>4</h3></div>
    <div class="item item_300"><h3>5</h3></div>
    <div class="item item_200"><h3>6</h3></div>
  </div>
</section>


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Speed in slick carousel slider is not permanent when sliders have different width

Sources

Related Questions