jQuery Slick Slider showing some empty slides

问题

I'm creating a product slider using slick jQuery plugin, in that slider contents are filled using js and later call slick function,

slider slider seems working but it shows some empty sliders which has class .slick-cloned

the site url is

the last slider working fine but first two not, can anyone help me to fix this

below has some dummy codes which used for 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,
 });
});

回答1:

Slick is behaving as advertised. This is actually a common user error.

Here's your starting markup:

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

Then you run the optionextended_images.js on it and this piece of code:

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;

leaves your markup like this:

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

The way Slick works is it takes all the children of the designated container and turns them into slides. The "empty slides" you're seeing are actually the spacer divs you're adding.

回答2:

I was facing the same issue. An empty div was getting generated on smaller devices.

Unwanted structure:

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

After doing lot of R&D didn't found the cause of it. So decided to hack it. Adding below line in responsive css for smaller devices fixed the issue for me.

Solution:

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

来源：https://stackoverflow.com/questions/30650016/jquery-slick-slider-showing-some-empty-slides

标签

jquery

slick.js