Slick Slider没有使用API​​ json进行初始化

Question

尝试将光滑滑块与API结合使用但由于某种原因它不起作用。

不确定我是否做错了。

HTML

<div class="row">
  <div id="test">
    <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div>

    <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div>

    <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div>
  </div>
</div>


<div class="row">
  <div id="cats">
  </div>
</div>

你可以看到第一个滑块“#test”使用与底部名为“#cats”

相同的html标记。

由于某种原因滑块#cats不会初始化。是否与我一起使用append（）到id为“cats”的div？

JS

    $(document).ready( function() {

  $.getJSON("https://api.myjson.com/bins/187677", function(data){

    $.each(data.pets, function() {

      var name = this["pet_name"];
      var sex = this["sex"];
      var age = this["age"];
      var state = this["addr_state_code"];
      var image = this ["large_results_photo_url"];
      var city = this ["addr_city"];

      if ( sex = "m") {
        sex = "Male";
      }
      if ( sex = "f") {
        sex = "Female";
      }

      $("#cats").append(
          "<div class='card top'>" +
            "Hello! My name is"+
            "<div class='name'>" + name + "</div>" +
            "<div class='location'>" + city + ", " +state + "</div>" +
            "<div class='sex-age'>" + sex + ", " + age + "</div>" +
          "</div>"
      );


    });  
  });

  $('#cats').slick();
  $('#test').slick();

});

让你感到高兴！

Answer 1

在DOM中插入相关幻灯片后，您需要初始化slick的{​​{1}}插件

#cats

或者，您可以提前初始化插件，并使用$(document).ready(function() { $.getJSON("https://api.myjson.com/bins/187677", function(data) { $.each(data.pets, function() { var name = this["pet_name"]; var sex = this["sex"]; var age = this["age"]; var state = this["addr_state_code"]; var image = this["large_results_photo_url"]; var city = this["addr_city"]; if (sex = "m") { sex = "Male"; } if (sex = "f") { sex = "Female"; } $("#cats").append( "<div class='card top'>" + "Hello! My name is" + "<div class='name'>" + name + "</div>" + "<div class='location'>" + city + ", " + state + "</div>" + "<div class='sex-age'>" + sex + ", " + age + "</div>" + "</div>" ); }); $('#cats').slick(); }); $('#test').slick(); }); 方法

.slice('slickAdd', 'html node here')