I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here:
However, what's happening in my case is this:
Why is the slider stretching to fill 100% of the div? Am I missing something or is this a known issue?
Below is the code snippet:
<div class="services_slider">
<div class="service" style="width: 150px">
<span class="service_title">Financiamento</span>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu efficitur arcu, sit amet vestibulum libero. Vivamus ac ligula eros. Pellentesque fermentum diam ac mi elementum sollicitudin....quip commodo dignissim congue, est nisl auctor eros, id auctor odio neque vel risus."</p>
</div>
<div class="service" style="width: 250px">
<span class="service_title">Oficina</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. ...racies feugiat."</p>
</div>
...
</div>
$(document).ready(function() {
$('.services_slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
Your assistance on resolving this issue would be greatly appreciated. Thank you in advance!