图片无法正确显示 Ajax 逐个循环或光滑的 js

Question

在我的文档中，如果我直接在 div 中添加图像并使用 cycle 或 slick js，我的幻灯片可以工作，但如果我通过 ajax 添加图像， div 显示数组的图像和不起作用。

这是div:

<div class="slideshow"></div>

通过将图像添加到 div 循环或 slick js 工作：

<div class="slideshow">
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />
<img src="images/image4.jpg" />
</div>

但是在通过 ajax 添加图像时 div 只显示图像而不滑动（只是图像数组）：

init:
$(".slideshow").slick({}) or $(".slideshow").cycle({});


ajax: 

$.ajax({
url: '/getimages'
}).done(function(data){

$.each(data.images, function(i, image){
$(".slideshow").append(`<img src="images/${image}" />`);
});
});

Answer 1

您必须在 ajax 调用完成后初始化滑块。

$.ajax({
  url: '/getimages'
}).done(function(data) {
  $.each(data.images, function(i, image) {
    $(".slideshow").append(`<img src="images/${image}" />`);
  });

  $(".slideshow").slick({}) or $(".slideshow").cycle({});
});
``

图片无法正确显示 Ajax 逐个循环或光滑的 js

The Images doesn't show Correclty with Ajax Loop by cycle or slik js

ajax

jquery

slick.js