光滑的轮播可变宽度无效

Question

我在Rails应用程序（v.5.2.0）中使用光滑的滑块1.8.1。目前，我在将variablewidth设置为true时遇到问题。我本来希望有这样的例子：

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

但是发生在我身上的是：

为什么滑块会拉伸到div的100％？我是在做错事还是已知问题？

这是我的代码：

<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
  });
});

希望您能帮助我，谢谢您！

Answer 1

尽管您有slideToShow: 1，但我认为真正的问题是要插入width div的内联.service。

您应该做的就是将这些div保留下来，并用设置宽度的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 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>