我在我的 Rails 应用程序 (v.5.2.0) 中使用 slick slider 1.8.1。现在我遇到了 variablewidth 设置为 true 的问题。我期待有这样的例子:
http://kenwheeler.github.io/slick/
但是发生在我身上的是这样的:
为什么 slider 会拉伸(stretch)到 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
});
});
希望您能帮助我，在此先感谢您!
最佳答案
虽然你有 slideToShow: 1我认为你真正的问题是内联 width你正在穿上你的 .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>关于jquery - Slick Carousel 可变宽度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51328864/