Slick Slider - API 将图像加载到幻灯片中

Question

我正在创建一个 api 图像，如下所示：

{
  "images": [
    { "src": "http://placehold.it/100x100" },
    { "src": "http://placehold.it/100x100" },
    { "src": "http://placehold.it/100x100" }
  ]
}

我集成了光滑的滑块 (http://kenwheeler.github.io/slick/) 和以下代码以将图像附加到滑块。

const jsonUrl = "./images.json";
$.getJSON(jsonUrl, function (json) {
  var imgList = "";
  $.each(json.images, function () {
    imgList += '<div class="slide"><img src= "' + this.src + '"></div>';
  });

  $('.videos-slides .slide').append(imgList);
});

HTML 标记如下：

<div class="videos-slider">
  <div class="videos-slides"></div>
</div>

我理解这是如何工作的逻辑，但我需要朝着正确的方向推动才能实现这一目标 - 我遇到的问题是图像在彼此下方加载。部分原因是当我将图像附加到 .video-slides .slide 时，它不会添加额外的类，当您将 a 添加到 html 本身时，它会通过光滑的滑块添加。

我已经在上面的所有代码之前初始化了光滑的滑块。仅供参考。

Answer 1

添加 HTML

后，您需要刷新滑块

当你

  $('.videos-slides .slide').append(imgList);

也这样做

$('.mySlider')[0].slick.refresh(); //replace .mySlider with actual DOM element

查看演示 - https://jsfiddle.net/5ox31m2a/2993/

Answer 2

使用专用方法slickAdd，问题已解决。

const jsonUrl = "./images.json";
$.getJSON(jsonUrl, function (json) {
var imgList = "";

$.each(json.images, function () {
  imgList += '<div><img src= "' + this.src + '"></div>';
});

$('.sy-videos-slides').slick('slickAdd', imgList);
});

Slick Slider - API 将图像加载到幻灯片中

Slick Slider - API to load images into slides

html

javascript

api

jquery

slick.js