光滑的滑块有空的滑块答案

【问题标题】：Slick Slider Has Empty Slide光滑的滑块有空的滑块
【发布时间】：2015-06-17 02:29:07
【问题描述】：

我有一个简单的 Slick 滑块，其中包含 4 个项目。它设置为中心模式和自动。当它第一次加载时，第一张幻灯片的左侧没有任何内容。每当最后一张（第四张）幻灯片进来时，右边（第一张）的幻灯片都是空白的，直到它滑进去。

我确实看到了this question，但答案对我来说完全是希腊语。这是我的 HTML 和 JS。

<div class="your-class">
  <div id="mySlide1">one</div>
  <div id="mySlide2">two</div>
  <div id="mySlide3">three</div>
  <div id="mySlide4">four</div>
</div>

Javascript

$('.your-class').slick({
    autoplay: true,
    centerMode:true,
    centerPadding:'60px'
    });

为什么第一张和最后一张幻灯片是空白的？

https://jsfiddle.net/s1f4yo76/2/

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

看起来 Slick Slider 只克隆了 class 属性。只有在滑动操作结束时，幻灯片才完全用 ID 克隆。我建议你使用类名而不是 ID 来定位幻灯片。

【讨论】：

【解决方案2】：

好吧，我想通了一些摆弄。由于某种原因，我的样式表中的样式被 Slick 引擎覆盖，但仅限于第一张和最后一张幻灯片。为了解决这个问题，我只是通过“SlickAdd”将我的 div 和内联样式直接放入 javascript 中，正如您在我的 jsfiddle 中看到的那样。

<div id="theContainer">
</div>

Javascript

var theContainer = $('#theContainer');

theContainer.slick({
    autoplay: true,
    centerMode:true,
    centerPadding:'60px',
    dots:true
    });

var theDiv = $('<div class="theSlide"><div style="background-color:orange;height:120px;">one</div></div>');
theContainer.slick('slickAdd', theDiv);

var theDiv = $('<div class="theSlide"><div style="background-color:green;height:120px;">two</div></div>');
theContainer.slick('slickAdd', theDiv);

var theDiv = $('<div class="theSlide"><div style="background-color:blue;height:120px;">three</div></div>');
theContainer.slick('slickAdd', theDiv);

https://jsfiddle.net/thinkcl/urspf8pg/2/

【讨论】：