Slick: issues with dynamically loaded images

Created on 11 Jan 2019 · 3Comments · Source: kenwheeler/slick

Hello

I'm having trouble with dynamically loaded content and slick slider. I have had this working previously when I was using the Instagram API and it worked fine but I've now come back to this idea using pictures I've scraped from Instagram, so I'm fetching them through a JSON of of the folder contents, so the url fetches the name of the file and the weird var called end is just the path within my server and file name appended.

Here is my script, sorry it may be a little messy I've been playing around with it a bit today.

Apologies I know this is a bodged question but the images load fine and the slider works if I use local images put into the DOM as you normally would, and I've tried the unslick method which did work the last time I tried this

$(document).ready(function() {

    function destroyCarousel() {
        if ($(".slides").hasClass("slick-initialized")) {
            $(".slides").slick("unslick");
            console.log('carousel destroyed');
            slickCarousel();
    }
}

//initialise carousel
function slickCarousel() {
    $(".slides").slick({
        autoplay: true,
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1
    })
    console.log("slider init");
}

function sendRequest() {
    $.ajax({
        url: "URL.json",
        dataType: "json",
        success: function(data) {
            var i;
            //loop through image data
            for (i = 1; i < 60; i++) {
                var pic = data.children[i].name;
                var end = "URL" + pic
                var div = $("<div/>").appendTo(".slides").addClass("slick-slide");
                var image = $("<img/>", { src: end }).appendTo(div).addClass("img-responsive");
            }
        }
    });
console.log("photos grabbed");
    }
sendRequest();
slickCarousel();
destroyCarousel();
});

Source