Slick Slider not initializing with API json - json

Question

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!

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