Question

我正在使用光滑的jQuery插件创建产品滑块，其中滑块内容使用js填充，稍后调用光滑功能，

滑块滑块似乎有效，但它显示了一些空滑块，它们具有.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('&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的工作方式是指定容器的所有子项并将其转换为幻灯片。你看到的“空幻灯片”实际上是你要添加的间隔分区。

Answer 2

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

    infinite: false, 
});

您需要添加无限设置

Answer 3

我遇到了同样的问题。在较小的设备上生成了一个空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>

在做了很多R＆amp; D之后，没有找到原因。所以决定破解它。对于较小的设备，在响应css中添加以下行可以解决问题。

<强>解决方案：

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

jQuery Slick Slider显示一些空幻灯片

3 个答案: