jquery 滑动滑块传送带可变宽度的项目

1qczuiv0  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(118)

我使用的是宽度可变的http://kenwheeler.github.io/slick/ carousel,我可以在CSS中使用预定义的类'. slick-slide'来定义它。如果页面上只有1个carousel,则可以正常工作,如下所示:

**演示 *

$( 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同时应用于所有的carousel,并覆盖了手动设置的宽度(即使我添加另一个类或使用'…!important’)。换句话说,我正在寻找一种方法来拥有几个“.slick-slide { width:... px; }用于不同的传送带。
顺便说一句,我发现How can I change the width and height of slides on Slick Carousel?,但是,也只涵盖1轮播,并没有解决这个问题。

zpf6vheq

zpf6vheq1#

如果你想单独改变slick-slide的宽度,你可以这样做:
不要使用通用的slick-slide类,将其更改为:
首先调用包含slick幻灯片的div,然后调用通用slick-slide类,如下所示:

.variable-width .slick-slide {
    width: 475px;
 }

字符串
这只会改变div中的幻灯片。
你可以在这里找到一个工作示例:http://jsfiddle.net/yorknew45/ah0f8ndy/1/
在这里,你可以看到2个等于幻灯片使用您的代码,有不同的大小。
让我知道如果这回答你的问题!

相关问题