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/slick@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/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/slick@1.8.1/slick/slick.min.js"></script>