slick.js - jQuery Slick Slider showing some empty slides -
i'm creating product slider using slick jquery plugin, in slider contents filled using js , later call slick function,
slider slider seems working shows empty sliders has class .slick-cloned
the site url
the last slider working fine first 2 not, can me fix this
below has dummy codes used slider
<div class="sliderrs"> <div><h3>contents added js</h3></div> <div><h3>contents added js</h3></div> <div><h3>contents added js</h3></div> <div><h3>contents added js</h3></div> <div><h3>contents added js</h3></div> <div><h3>contents added js</h3></div> </div> .
$(function(){ $('.sliderrs').slick({ slidestoshow: 3, slidestoscroll: 1, autoplay: true, autoplayspeed: 2000, }); });
slick behaving advertised. common user error.
here's 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 run optionextended_images.js on , 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(' ')}); element.insert(ul, {'bottom': new element('div').addclassname('spacer').update(' ')}); break; leaves markup this:
<ul id="options-901-list" class="options-list"> <div class="spacer" aria-hidden="true"> </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">€ 100,00</span> (+<span class="price">€ 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">€ 100,00</span> (+<span class="price">€ 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">€ 100,00</span> (+<span class="price">€ 121,00</span> incl. btw)</span></label></span></li> <div class="spacer" aria-hidden="true"> </div> </ul> the way slick works takes children of designated container , turns them slides. "empty slides" you're seeing spacer divs you're adding.
Comments
Post a Comment