jQuery Slick Slider 显示一些空幻灯片

Question

我正在使用 slick jQuery 插件创建一个产品 slider ，其中 slider 内容使用 js 填充，然后调用 slick 函数，

slider slider 似乎可以工作，但它显示了一些具有 .slick-cloned 类的空 slider

网站网址为

最后一个 slider 工作正常，但前两个 slider 工作正常，任何人都可以帮我解决这个问题

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

        <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(' ')});
    Element.insert(ul, {'bottom': new Element('div').addClassName('spacer').update(' ')});
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 的工作方式是获取指定容器的所有子容器并将它们转换为幻灯片。您看到的“空幻灯片”实际上是您要添加的间隔 div。