Estoy tratando de hacer una analogía con imágenes y videos usando un carrusel elegante en vue (nuxt). Funciona bien cuando las imágenes tienen el mismo ancho, pero cuando el ancho es diferente, la velocidad parece ser impredecible.
¿Cómo hacer que los controles deslizantes con diferentes anchos vayan uno tras otro con la misma velocidad y sin parar?
Este es mi ejemplo:
$(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>