问题描述
我正在将 http://kenwheeler.github.io/slick/轮播与可变宽度,我可以在CSS中使用预定义的类'.slick-slide'进行定义.如果页面上只有1个轮播,效果很好,就像这样:
I am using http://kenwheeler.github.io/slick/ carousel with a variable width, which I could define in CSS with the predefined class '.slick-slide'. It works fine if I have only 1 carousel on the page, like so:
演示
$( document ).ready(function() {
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
.slick-slide {
width: 475px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<div class="variable-width">
<img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/>
<img src="http://thescienceexplorer.com/sites/thescienceexplorer.com/files/blog/161130141053_1_540x360.jpg"/>
<img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/>
<img src="http://thescienceexplorer.com/sites/thescienceexplorer.com/files/blog/161130141053_1_540x360.jpg"/>
<img src="http://www.transitionsabroad.com/listings/travel/articles/images/morocco-sand-dunes-of-chegaga.jpg"/>
</div>
但是,通用的.slick-slide似乎同时应用于所有轮播,并覆盖了手动设置的宽度(即使我添加了另一个类或使用'...!important').换句话说,我正在寻找一种方法来为不同的轮播使用多个".slick-slide {width:... px;}.
However, it seems that the generic .slick-slide applies to all carousels at the same time and overwrites a manually set width (even if I add another class or use '... !important'). In other words, I am looking for a way to have several ".slick-slide { width: ...px; } for different carousels.
顺便说一句,我发现了如何在Slick Carousel上更改幻灯片的宽度和高度?,但是它也只能覆盖1个轮播,不能解决问题.
BTW I found How can I change the width and height of slides on Slick Carousel? which, however, also only covers 1 carousel and doesn't solve the issue.
推荐答案
如果要单独更改滑条的宽度,可以执行以下操作:
If you want to individually change the width of your slick-slide you can do this:
代替使用通用的slick-slide类,将其更改为:
Instead of using the generic slick-slide class, change it to this:
首先调用包含滑动幻灯片的div,然后按如下所示调用通用的slick-slide类:
first call your div containing the slick slide, and then call your generic slick-slide class like so:
.variable-width .slick-slide {
width: 475px;
}
这只会更改该div内的幻灯片.
This will change just the slide inside that div.
一个工作示例,您可以在这里找到它:
A working example you can find it here:
http://jsfiddle.net/yorknew45/ah0f8ndy/1/
在这里您可以看到使用大小不同的代码的2个等号幻灯片.
Here you can see 2 equals slide using your code, that has different sizes.
让我知道这是否回答了您的问题!
Let me know if this answer your question!
这篇关于光滑的滑块旋转木马可变宽度的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!