Slick Slider not initializing with API json

问题

Trying to incorporate slick slider with an API but for some reason it won't work.

Not sure if I'm doing something wrong.

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>

You can see the first slider "#test" does work with the same html markup as the one in the bottom named "#cats"

For some reason the slider #cats won't initialize though. Does it have to do with me using append() to the div with id "cats"?

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();

});

THank you in advanced!

回答1:

You need to initialize the slick plugin for the #cats after you have inserted the relevant slides in the DOM

$(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();
});

---

Alternatively you can initialize the plugin earlier, and use the .slice('slickAdd', 'html node here') method

$(document).ready(function() {
    $('#test').slick();
    $('#cats').slick();
    $.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").slick('slickAdd', 
            "<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>"
          );
        });
      });
 });

来源：https://stackoverflow.com/questions/43402747/slick-slider-not-initializing-with-api-json