如何在光滑的滑块中添加动态生成行？

Question

我正在尝试在光滑的滑块中添加动态生成的行/格。添加成功，但滑动条不起作用。请看一看。我已经做了很多研究。这是下面的代码片段：

$(document).ready(function() {

  $.getJSON("https://api.shopperapproved.com/reviews/13062?token=5QwfYVB4xnLszWC&from=2018-1-1&rating=1%2C2%2C3%2C4%2C5&sort=newest&limit=1000&test=false&xml=false", function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push("<div class='item'>" + "<div class='yo'>" + val['display_name'] + "</div>" + "<div class='test'>" + val['email_address'] + "</div>" + "</div>");
    });

    $(".slider").append(items.join(""));
  });
});



function sliderInit() {
  $('.slider').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true
  });
};
sliderInit();

.slider {
  width: 650px;
  margin: 0 auto;
}

.img,
.item {
  width: 200px;
  height: 200px;
  background: teal;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<div class="slider">

</div>

Answer 1

调用ajax内部的sliderInit（）函数或使用javascript的promise，因为所有数据都是从ajax提取的，所以您一开始就无法启动光滑的滑块

$(document).ready(function() {

  $.getJSON("https://api.shopperapproved.com/reviews/13062?token=5QwfYVB4xnLszWC&from=2018-1-1&rating=1%2C2%2C3%2C4%2C5&sort=newest&limit=1000&test=false&xml=false", function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push("<div class='item'>" + "<div class='yo'>" + val['display_name'] + "</div>" + "<div class='test'>" + val['email_address'] + "</div>" + "</div>");
    });

    $(".slider").append(items.join(""));
    sliderInit();
  });
  
});



function sliderInit() {
  $('.slider').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true
  });
};
//sliderInit();

.slider {
  width: 650px;
  margin: 0 auto;
}

.img,
.item {
  width: 200px;
  height: 200px;
  background: teal;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<div class="slider">

</div>