Slick Carousel 可变宽度不起作用
Slick Carousel variablewidth doesn't work
我在 Rails 应用程序 (v.5.2.0) 中使用 slick slider 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
});
});
希望你能帮助我，先谢谢你了！
虽然你有 slideToShow: 1 我认为你真正的问题是内联 width 你正在 .service div 上。
您应该做的是不理会这些 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>
我在 Rails 应用程序 (v.5.2.0) 中使用 slick slider 1.8.1。现在我遇到 variablewidth 设置为 true 的问题。我期待有这样的例子：
但是发生在我身上的是这样的：
为什么滑块会拉伸到 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 包裹幻灯片的内部内容。
所以这个：
<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>