光滑的滑块轮播可变宽度的项目

时间:2017-11-11 22:11:02

标签: jquery carousel slick slick.js

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

样本

$( 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;}。

BTW我发现How can I change the width and height of slides on Slick Carousel?但是,它也只覆盖了1个轮播并且没有解决问题。

1 个答案:

答案 0 :(得分:0)

如果您想单独更改光滑幻灯片的宽度,可以执行以下操作:

不使用通用的光滑幻灯片类,而是将其更改为:

首先调用包含光滑幻灯片的div,然后像这样调用你的通用光滑幻灯片类:

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

这将改变div中的幻灯片。

您可以在此处找到一个工作示例:

http://jsfiddle.net/yorknew45/ah0f8ndy/1/

在这里,您可以使用代码看到2等于幻灯片,它具有不同的大小。

让我知道这是否能回答你的问题!