Slick Carousel variablewidth doesn't work

Question

I'm using slick slider 1.8.1 in my Rails app (v.5.2.0). Right now I'm having a problem with variablewidthset to true. I was expecting to have something like this example:

http://kenwheeler.github.io/slick/

But what is happening to me is this:

Why is the slider stretching to 100% of the div? Am I doing something wrong or is this a known issue?

Here is my code:

<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. Quisque tempus porta nibh. Mauris vel lectus est. In tristique, quam 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>
   <div class="service" style="width: 300px">
       <span class="service_title">Venda de veículos</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>
   <div class="service" style="width: 400px">
       <span class="service_title">Teste 1</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>
    <div class="service" style="width: 100px">
        <span class="service_title">Teste 2</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>
   <div class="service" style="width: 250px">
        <span class="service_title">Teste 3</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>
</div>

$(document).ready(function() {
  $('.services_slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
});

Hope you can help me, thank you in advance!

Answer 1

Although you have slideToShow: 1 I think your real problem is the inline width you are putting on your .service div's.

What you should do is leave these divs alone, and wrap the inner content of the slides with a div that sets the width.

So this:

    <div class="service" style="width: 250px">
        <span class="service_title">Teste 3</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>

Would become this:

   <div class="service">
     <div style="width: 250px">
        <span class="service_title">Teste 3</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
    </div>
   </div>

$(document).ready(function() {
  $('.services_slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />


<div class="services_slider">
  <div class="service">
    <div 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. Quisque tempus porta nibh. Mauris vel lectus est.
        In tristique, quam commodo dignissim congue, est nisl auctor eros, id auctor odio neque vel risus."</p>
    </div>
  </div>
  <div class="service">
    <div 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
        libero a scelerisque feugiat."</p>
    </div>
  </div>
  <div class="service">
    <div style="width: 300px">
      <span class="service_title">Venda de veículos</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
        libero a scelerisque feugiat."</p>
    </div>
  </div>
  <div class="service">
    <div style="width: 400px">
      <span class="service_title">Teste 1</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
        libero a scelerisque feugiat."</p>
    </div>

  </div>
  <div class="service">
    <div style="width: 100px">
      <span class="service_title">Teste 2</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
        libero a scelerisque feugiat."</p>
    </div>
  </div>
  <div class="service">
    <div style="width: 250px">
      <span class="service_title">Teste 3</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
        libero a scelerisque feugiat."</p>
    </div>

  </div>
</div>