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

【问题标题】：slick slider carousel variable width of items光滑的滑块轮播可变宽度的项目
【发布时间】：2018-04-24 21:27:38
【问题描述】：

我正在使用具有可变宽度的http://kenwheeler.github.io/slick/ 轮播，我可以在 CSS 中使用预定义的类“.slick-slide”进行定义。如果页面上只有 1 个轮播，它可以正常工作，如下所示：

演示

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

顺便说一句，我找到了How can I change the width and height of slides on Slick Carousel?，但是它也只涵盖了 1 个轮播，并没有解决问题。

【问题讨论】：

标签： jquery carousel slick.js

【解决方案1】：

如果您想单独更改 slick-slide 的宽度，您可以这样做：

不要使用通用的 slick-slide 类，而是将其更改为：

首先调用包含 slick slide 的 div，然后像这样调用通用的 slick-slide 类：

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

这将只更改该 div 内的幻灯片。

您可以在这里找到一个工作示例：

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

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

如果这回答了你的问题，请告诉我！

【讨论】：