jQuery Slick Slider 显示一些空幻灯片

Question

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

滑块滑块似乎工作，但它显示了一些空滑块类 .slick-cloned

网站网址是

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

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

        <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。