슬릭 슬라이더가 API json으로 초기화되지 않음

Question

슬릭 슬라이더를 API에 통합하려고했지만 어떤 이유로 작동하지 않습니다.

내가 잘못하고 있는지 확실하지 않습니다.

당신은 "#test"첫 슬라이더를 볼 수 있습니다

<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> 

HTML은 "#cats"어떤 이유로 슬라이더 번호

라는 이름의 맨 아래에있는 것과 같은 HTML 태그와 함께 작동합니까 고양이는 초기화하지 않습니다. 그것은 id "cats"가있는 div에 append()를 사용하여 나와 관련이 있습니까?

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에 관련 슬라이드를 삽입 한 후

Answer 1

당신은

$(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') 방법을 사용할 수있는 #cats에 대한 slick 플러그인을 초기화 할 필요가

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