Question

我有一个带有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/

Answer 1

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

Answer 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/

光滑滑块有空幻灯片

2 个答案: