如何在Slick Carousel上更改幻灯片的宽度和高度？

http://kenwheeler.github.io/slick/

一位朋友建议我使用Ken Wheeler的Slick旋转木马，我决定尝试一下。 我遇到了一些问题。 首先，幻灯片不会像他们应该那样“相互叠加”。 它们垂直堆叠。 当第一张幻灯片淡入时，它处于正确的位置，但是，当第二张幻灯片淡入时，它位于第一张幻灯片的下方。 另请注意，在第一张幻灯片上，右边框被切除，在第二张幻灯片上，除了左边框之外的所有内容都被剪掉了。

第二个问题是我似乎无法改变幻灯片的宽度或高度。 它们都是相同的尺寸。 （它们在我的css文件中的“精选”类中设置。）

我究竟做错了什么？

                 
Top Stories
  $(document).ready(function(){ $('#featured-articles').slick({ arrows: true, autoplay: true, autoplaySpeed: 3000, dots: true, draggable: false, fade: true, infinite: false, responsive: [ { breakpoint: 620, settings: { arrows: true } }, { breakpoint: 345, settings: { arrows: true } } ] }); });  
 
 
Another Test Article
 
https://www.bungie.net/pubassets/1319/Destiny_31.png Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex libri...
 
Read More
 
 
 
This Is a Test Article
 
https://www.bungie.net/pubassets/1319/Destiny_31.png Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex libri...
 
Read More
 
  

Answer 1

我做了这个插件。 发生了一些css干扰。

它是滑块本身的边框。 要么使用

 box-sizing: border-box 

吸收边框宽度，或将边框放在幻灯片内的内容上。

Answer 2

我使用其中一个属性初始化滑块

 variableWidth: true, 

那么我可以将幻灯片的宽度设置为CSS中我想要的任何东西：

 .slick-slide { width: 200px; } 

Answer 3

基本上你需要编辑JS并添加（在这种情况下，在$('#featured-articles').slick({ ），这个：

 variableWidth: true, 

这将允许您在CSS中编辑宽度，通常使用：

 .slick-slide { width: 100%; } 

或者在这种情况下：

 .featured { width: 100%; } 

Answer 4

我自己找到了好的解决方案 由于现在仍然使用光滑的滑块，我将发布我的方法。

@RuivBoas答案部分正确。 – 它可以改变幻灯片的宽度，但它可以打破滑块。 为什么？

滑动滑块可能会超出浏览器宽度。 实际容器宽度设置为可以容纳其所有幻灯片的值。

设置幻灯片宽度的最佳解决方案是使用实际浏览器窗口的宽度。 它在响应式设计中效果最佳。

例如，2个具有吸收宽度的载玻片

CSS

 .slick-slide { width: 50vw; // for absorbing width from @Ken Wheeler answer box-sizing: border-box; } 

JS

 $(document).on('ready', function () { $("#container").slick({ variableWidth: true, slidesToShow: 2, slidesToScroll: 2 }); }); 

HTML标记