Slick slider and infiniteLoad - not showing loaded slick slider

JavaScript
1

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 the same file we use infiniteLoad to show next set of sliders (class where sliders are located load fine):

$('.search-list-wrap').infiniteLoad({
        'navSelector':'.loadmore-pagination',
        'contentSelector':'.search-list-wrap',
        'nextSelector':'.loadmore-pagination .next.page-numbers',
        'itemSelector':'.themetera_property',
        'loadingImage':themetera.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 option) 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.

It is this page when scrolled down:

http://demo.themetera.com/realestate/advanced-search/

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.