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时，它不会添加额外的类，当您将其添加到html本身时，它将通过光滑滑块添加。

我在FYI上面的所有代码之前初始化了光滑的滑块。

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

2 个答案: