光滑的滑块旋转木马可变宽度的项目 [英] slick slider carousel variable width of items

问题描述

我正在将 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!

这篇关于光滑的滑块旋转木马可变宽度的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！