Struggling with looping the background image in a slick slider? Check out the code snippet below.
var json = [
{ "img_url": "https://via.placeholder.com/500x500?text=1" },
{ "img_url": "https://via.placeholder.com/500x500?text=2" },
{ "img_url": "https://via.placeholder.com/500x500?text=3" }
];
$.each(json, function () {
var image = this["img_url"];
console.log(image);
$("#test").append(
"<div class='slideBG'><img src=" + image + "></div>"
);
}); // each ENDS
// initialize the slick slider
$("#test").slick({
autoplay: true,
autoplaySpeed: 5000,
dots: false,
arrows: false,
infinite: true,
fade: true
});
The above code works well when appending the img tag. However, if you attempt...
$(".slideBG").css("background", "url('" + image + "')");
...only the last image is displayed as a background without looping through the others. I'm aiming to retrieve image URLs from JSON and apply them as backgrounds for the slider. Would greatly appreciate any assistance or suggestions. Thank you!