- 首页
- 其他开发
- Slick Slider 未使用 API json 进行初始化
Slick Slider 未使用 API json 进行初始化
[英] Slick Slider not initializing with API json
本文介绍了Slick Slider 未使用 API json 进行初始化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
尝试将光滑的滑块与 API 结合，但由于某种原因它不起作用.
不确定我是否做错了什么.
html
<div id="测试"><div class="card top">你好！我的名字是<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">女性，成人</div>
<div class="card top">你好！我的名字是<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">女性，成人</div>
<div class="card top">你好！我的名字是<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">女性，成人</div>
<div class="row"><div id="猫">
您可以看到第一个滑块#test"与底部名为#cats"的滑块使用相同的 html 标记
由于某种原因，滑块 #cats 不会初始化.这与我使用 append() 到 id 为cats"的 div 有关系吗?
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"];如果(性别=米"){性别 = "男";}如果(性别=f"){性别=女性"；}$("#cats").append("<div class='card top'>"+你好！我的名字是"+"<div class='name'>"+ 名称 + ""+"<div class='location'>"+ 城市 + ", " +state + "
"+"<div class='sex-age'>"+ 性别 + ", " + 年龄 + "</div>"+</div>");});});$('#cats').slick();$('#test').slick();});
先谢谢你！
解决方案
在插入相关幻灯片后，您需要为 #cats 初始化 slick 插件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"];如果(性别=米"){性别 = "男";}如果(性别=f"){性别=女性"；}$("#cats").append("<div class='card top'>"+你好！我的名字是" +"<div class='name'>"+ 名称 + ""+"<div class='location'>"+ 城市 + ", " + 州 + "
"+"<div class='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"];如果(性别=米"){性别 = "男";}如果(性别=f"){性别=女性"；}$("#cats").slick('slickAdd',"<div class='card top'>"+你好！我的名字是" +"<div class='name'>"+ 名称 + ""+"<div class='location'>"+ 城市 + ", " + 州 + "
"+"<div class='sex-age'>"+ 性别 + ", " + 年龄 + "</div>"+</div>");});});});
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!
解决方案
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>"
);
});
});
});
这篇关于Slick Slider 未使用 API json 进行初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
