Slick Slider未使用API​​ json初始化

问题描述

试图将平滑滑块与API结合在一起，但是由于某些原因，它无法正常工作.

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>

您可以看到第一个滑块"#test"的确与底部名为"#cats"的html标记具有相同的html标记.

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

由于某些原因，滑块#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();

});

谢谢您！

推荐答案

在DOM中插入相关幻灯片后，需要为#cats初始化slick插件

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

---

或者，您可以更早地初始化插件，并使用.slice('slickAdd', 'html node here')方法

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

这篇关于Slick Slider未使用API​​ json初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！