jQuery Slick Slider 显示一些空白幻灯片

Question

我正在使用 slick jQuery 插件创建一个产品滑块，其中滑块内容是使用 js 填充的，稍后调用 slick 函数，

slider slider 似乎可以工作，但它显示了一些空滑块，其中有 class .slick-cloned

站点 url 是

最后一个滑块工作正常但前两个不工作，谁能帮我解决这个问题

下面有一些用于滑块的虚拟代码

        <div class="sliderrs">
            <div><h3>contents added by js</h3></div>
            <div><h3>contents added by js</h3></div>
            <div><h3>contents added by js</h3></div>
            <div><h3>contents added by js</h3></div>
            <div><h3>contents added by js</h3></div>
            <div><h3>contents added by js</h3></div>
        </div>

.

$(function(){
  $('.sliderrs').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
 });
});

Answer 1

Slick 的行为与宣传的一样。这实际上是一个常见的用户错误。

这是您的起始标记：

<ul id="options-901-list" class="options-list">
    <li><input type="checkbox" class="checkbox  product-custom-option" onclick="opConfig.reloadPrice()" name="options[901][]" id="options_901_2" value="2051"  price="100" /><span class="label"><label for="options_901_2">7UP - 10 tray's <span class="price-notice">+<span class="price">€ 100,00</span> (+<span class="price">€ 121,00</span> Incl. BTW)</span></label></span></li>

    <li><input type="checkbox" class="checkbox  product-custom-option" onclick="opConfig.reloadPrice()" name="options[901][]" id="options_901_3" value="2050"  price="100" /><span class="label"><label for="options_901_3">Coca Cola - 10 tray's <span class="price-notice">+<span class="price">€ 100,00</span> (+<span class="price">€ 121,00</span> Incl. BTW)</span></label></span></li>

    <li><input type="checkbox" class="checkbox  product-custom-option" onclick="opConfig.reloadPrice()" name="options[901][]" id="options_901_4" value="2049"  price="100" /><span class="label"><label for="options_901_4">Fanta - 10 tray's <span class="price-notice">+<span class="price">€ 100,00</span> (+<span class="price">€ 121,00</span> Incl. BTW)</span></label></span></li>
</ul>

然后你运行上面的optionextended_images.js和这段代码：

case 'grid' : 
    this.dd.className = 'optionextended-' + this.layoutGroup + '-grid';
    var ul = this.dd.down('ul');
    Element.insert(ul, {'top': new Element('div').addClassName('spacer').update('&nbsp;')});
    Element.insert(ul, {'bottom': new Element('div').addClassName('spacer').update('&nbsp;')});
break;

留下这样的标记：

<ul id="options-901-list" class="options-list">
    <div class="spacer" aria-hidden="true">&nbsp;</div>

    <li class="" aria-hidden="true"><img src="http://www.prokitchen.nl/media/catalog/product/cache/1/thumbnail/100x100/9df78eab33525d08d6e5fb8d27136e95/7/u/7up_5.jpg" class="optionextended-image" onclick="optionExtended.actAsLabel(901, 2051)"><input type="checkbox" class="checkbox  product-custom-option" onclick="opConfig.reloadPrice()" name="options[901][]" id="options_901_2" value="2051" price="100"><span class="label"><label for="options_901_2">7UP - 10 tray's <span class="price-notice">+<span class="price">€&nbsp;100,00</span> (+<span class="price">€&nbsp;121,00</span> Incl. BTW)</span></label></span></li>

    <li class="" aria-hidden="true"><img src="http://www.prokitchen.nl/media/catalog/product/cache/1/thumbnail/100x100/9df78eab33525d08d6e5fb8d27136e95/c/o/cola_5.jpg" class="optionextended-image" onclick="optionExtended.actAsLabel(901, 2050)"><input type="checkbox" class="checkbox  product-custom-option" onclick="opConfig.reloadPrice()" name="options[901][]" id="options_901_3" value="2050" price="100"><span class="label"><label for="options_901_3">Coca Cola - 10 tray's <span class="price-notice">+<span class="price">€&nbsp;100,00</span> (+<span class="price">€&nbsp;121,00</span> Incl. BTW)</span></label></span></li>

    <li class="" aria-hidden="true"><img src="http://www.prokitchen.nl/media/catalog/product/cache/1/thumbnail/100x100/9df78eab33525d08d6e5fb8d27136e95/f/a/fanta_5.jpg" class="optionextended-image" onclick="optionExtended.actAsLabel(901, 2049)"><input type="checkbox" class="checkbox  product-custom-option" onclick="opConfig.reloadPrice()" name="options[901][]" id="options_901_4" value="2049" price="100"><span class="label"><label for="options_901_4">Fanta - 10 tray's <span class="price-notice">+<span class="price">€&nbsp;100,00</span> (+<span class="price">€&nbsp;121,00</span> Incl. BTW)</span></label></span></li>

    <div class="spacer" aria-hidden="true">&nbsp;</div>
</ul>

Slick 的工作方式是获取指定容器的所有子项并将它们变成幻灯片。您看到的 "empty slides" 实际上是您添加的间隔 div。

Answer 2

我遇到了同样的问题。在较小的设备上生成了一个空 div。

不需要的结构：

<div class="slick-track slick-slide slick-current slick-active slick-center" data-slick-index="0" aria-hidden="false" style="width: 210px;" tabindex="-1" role="option" aria-describedby="slick-slide00"><div class="slick-list" aria-live="polite"></div></div>

经过大量的研发没有找到它的原因。所以决定破解它。在响应式 css 中为较小的设备添加以下行解决了我的问题。

解法：

.slick-track .slick-track { display: none; }

Answer 3

$('.single-item-rtl').slick({

    infinite: false, 
});

您需要添加无限设置

jQuery Slick Slider 显示一些空白幻灯片

jQuery Slick Slider showing some empty slides

jquery

slick.js