Slick slider and infiniteLoad - not showing loaded slick slider

Question

This issue has been asked before, but probably due to my JS inexperience I have not be able to get it working properly as instructed. The issue is with infinite page load as when we scroll down we have to show another set of slick sliders.

In our app.js file we use this for slick slider:

    $('.slider-single').slick({
        autoplay: false,
        lazyLoad: 'ondemand',
        autoplaySpeed: 2000,
        adaptiveHeight: false,
        infinite: true,
        arrows: true,
        slidesToShow: 1,
        slidesToScroll: 1,
    });

In same file we use infiniteLoad to show next set of sliders (class where sliders are located):

$('.search-list-wrap').infiniteLoad({
        'navSelector':'.loadmore-pagination',
        'contentSelector':'.search-list-wrap',
        'nextSelector':'.loadmore-pagination .next.page-numbers',
        'itemSelector':'.theme_item',
        'loadingImage':theme.themeUrl+'/images/loading2.svg',
        //'loadingFinishedText':pix_infiniteload.loadingFinishedText,
    });

When scrolled called divs and other data is presented nicely, but slick gallery is not showing for newly loaded elements. To my understanding the slick slider has to close (unslick) and then re-initialize again when new slick galleries should be presented. I did not manage to make this work.

Thank you for your assistance.

Njegosh Njegosh · Accepted Answer · 2018-07-05T20:13:58

I have made this work by destroying and then again initializing the slick slider. However, this created new problems on top of the existing SEO issues. So, the best answer for this question would be drop the infinite load completely and stick with the pagination. Well at least when it comes to slick slider functionality.

Slick slider and infiniteLoad - not showing loaded slick slider

1 Answers