光滑的轮播可变宽度不起作用

Question

我在我的 Rails 应用程序 (v.5.2.0) 中使用了 slick slider 1.8.1。现在我遇到了将variablewidthset 设置为true 的问题。我期待有这样的例子：

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

但是发生在我身上的是这样的：

为什么滑块会拉伸到 100% 的 div？我做错了什么还是这是一个已知问题？

这是我的代码：

<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，但我认为你真正的问题是你在.service div 上的内联width。

您应该做的是不理会这些 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>