光滑的滑块有空幻灯片

Question

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

我确实看到了，但答案对我来说完全是希腊语。这是我的 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'
    });

为什么第一张和最后一张幻灯片 blank/empty？

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

Answer 1

好吧，我想通了。由于某种原因，我的样式表中的样式被 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/

Answer 2

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

光滑的滑块有空幻灯片

Slick Slider Has Empty Slide

jquery

slick.js