Slick Slider未使用API​​ json初始化 [英] Slick Slider not initializing with 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初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！