javascript - 带有 jQ​​uery each() 的 Slick Slider 背景图像循环

Question

在平滑 slider 中循环背景图像时出现问题。请看下面的代码。

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
});

如果我附加 img 标签，上面的代码工作正常。但是如果我尝试...

$(".slideBG").css("background", "url('" + image + "')");

它只显示最后一张图像作为背景，而不会循环显示其他图像。我想要实现的目标是从 JSON 获取图像 url 并将其用作背景 slider 。如果有人可以帮助我，我将不胜感激。谢谢

Answer 1

想通了。将背景样式属性直接添加到 div 附加中，如下所示。

 <div style="background:url(' + image + ')" class="slideBG"></div>