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>