Reinit猫头鹰在ajax之后加入(Reinit owlCarrouse after ajax)
我正在开发一个小型项目，我需要打电话给API，然后将结果添加到轮播。
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
});
function getChannels() {
return ['ninja', 'freecodecamp', 'aws'];
}
$(document).ready(function() {
let channels = getChannels().join(',');
$.ajax({
url: 'https://api.twitch.tv/kraken/users?login=' + channels,
type: 'GET',
dataType: 'json',
success: function(data) {
let html = '';
const CHANNELS = data.users;
CHANNELS.forEach(function(channel) {
html = '<div class="item text-center"><div class="card"><img class="card-img-top" src="' + channel.logo + '" alt="' + channel.name + '"><div class="card-body"><h5 class="card-title">' + channel.name + '</h5><p class="card-text">' + channel.bio + '</p></div></div></div>';
$(".owl-carousel").append(html);
});
},
error: function() {
alert('boo!');
},
beforeSend: setHeader,
});
});
function setHeader(xhr) {
xhr.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
xhr.setRequestHeader('Client-ID', 'd0ovtk7831pgj75eaahflmefr1jrbx');
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="owl-carousel owl-theme" id="carousel">
<div class="item"><div class="card"><img class="card-img-top" src="https://via.placeholder.com/300"><div class="card-body"><h5 class="card-title">Cards title</h5><p class="card-text">Body1</p></div></div></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
根据Stack Overflow中的一些线程，我必须添加这样的东西
$('.owl-carousel').trigger('refresh.owl.carousel');
或者将这些行添加到成功函数中...
owl.owlCarousel({
items: 4,
navigation: true
});
但不工作...任何想法？
出于某种原因，新卡添加到booton中，而不包括在传送带中
I'm working on a small project, where I need make a call to an API, and add the results to a carousel.
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
});
function getChannels() {
return ['ninja', 'freecodecamp', 'aws'];
}
$(document).ready(function() {
let channels = getChannels().join(',');
$.ajax({
url: 'https://api.twitch.tv/kraken/users?login=' + channels,
type: 'GET',
dataType: 'json',
success: function(data) {
let html = '';
const CHANNELS = data.users;
CHANNELS.forEach(function(channel) {
html = '<div class="item text-center"><div class="card"><img class="card-img-top" src="' + channel.logo + '" alt="' + channel.name + '"><div class="card-body"><h5 class="card-title">' + channel.name + '</h5><p class="card-text">' + channel.bio + '</p></div></div></div>';
$(".owl-carousel").append(html);
});
},
error: function() {
alert('boo!');
},
beforeSend: setHeader,
});
});
function setHeader(xhr) {
xhr.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
xhr.setRequestHeader('Client-ID', 'd0ovtk7831pgj75eaahflmefr1jrbx');
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="owl-carousel owl-theme" id="carousel">
<div class="item"><div class="card"><img class="card-img-top" src="https://via.placeholder.com/300"><div class="card-body"><h5 class="card-title">Cards title</h5><p class="card-text">Body1</p></div></div></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
According to some threads here in Stack Overflow, I must add something like this
$('.owl-carousel').trigger('refresh.owl.carousel');
or add this lines to the sucess function...
owl.owlCarousel({
items: 4,
navigation: true
});
But doesn't work... any idea???
For some reason, the new card add added to the booton, and not included into the carousel
最满意答案
不知道为什么你想要初始化一些内容的旋转木马，然后用新内容替换它的内容，但这里是你需要改变的地方：
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
function getChannels() {
return ["ninja", "freecodecamp", "aws"];
}
$(document).ready(() => {
const channels = getChannels().join(",");
$.ajax({
url: `https://api.twitch.tv/kraken/users?login=${channels}`,
type: "GET",
dataType: "json",
success(data) {
let html = "";
const CHANNELS = data.users;
// destroy the old carousel and cleanup the node
$(".owl-carousel").trigger("destroy.owl.carousel");
$(".owl-carousel").empty();
CHANNELS.forEach(channel => {
html = `<div class="item text-center"><div class="card"><img class="card-img-top" src="${
channel.logo
}" alt="${
channel.name
}"><div class="card-body"><h5 class="card-title">${
channel.name
}</h5><p class="card-text">${channel.bio}</p></div></div></div>`;
// append new HTML inside the loop
$(".owl-carousel").append(html);
});
// re-initialize the carousel outside the loop
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
},
error() {
alert("boo!");
},
beforeSend: setHeader
});
});
function setHeader(xhr) {
xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v5+json");
xhr.setRequestHeader("Client-ID", "d0ovtk7831pgj75eaahflmefr1jrbx");
}
Not sure why you would want to initialize the carousel with some content, then replace its contents with new contents, but here's what you need to change:
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
function getChannels() {
return ["ninja", "freecodecamp", "aws"];
}
$(document).ready(() => {
const channels = getChannels().join(",");
$.ajax({
url: `https://api.twitch.tv/kraken/users?login=${channels}`,
type: "GET",
dataType: "json",
success(data) {
let html = "";
const CHANNELS = data.users;
// destroy the old carousel and cleanup the node
$(".owl-carousel").trigger("destroy.owl.carousel");
$(".owl-carousel").empty();
CHANNELS.forEach(channel => {
html = `<div class="item text-center"><div class="card"><img class="card-img-top" src="${
channel.logo
}" alt="${
channel.name
}"><div class="card-body"><h5 class="card-title">${
channel.name
}</h5><p class="card-text">${channel.bio}</p></div></div></div>`;
// append new HTML inside the loop
$(".owl-carousel").append(html);
});
// re-initialize the carousel outside the loop
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
},
error() {
alert("boo!");
},
beforeSend: setHeader
});
});
function setHeader(xhr) {
xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v5+json");
xhr.setRequestHeader("Client-ID", "d0ovtk7831pgj75eaahflmefr1jrbx");
}Reinit猫头鹰在ajax之后加入(Reinit owlCarrouse after ajax)
我正在开发一个小型项目，我需要打电话给API，然后将结果添加到轮播。
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
});
function getChannels() {
return ['ninja', 'freecodecamp', 'aws'];
}
$(document).ready(function() {
let channels = getChannels().join(',');
$.ajax({
url: 'https://api.twitch.tv/kraken/users?login=' + channels,
type: 'GET',
dataType: 'json',
success: function(data) {
let html = '';
const CHANNELS = data.users;
CHANNELS.forEach(function(channel) {
html = '<div class="item text-center"><div class="card"><img class="card-img-top" src="' + channel.logo + '" alt="' + channel.name + '"><div class="card-body"><h5 class="card-title">' + channel.name + '</h5><p class="card-text">' + channel.bio + '</p></div></div></div>';
$(".owl-carousel").append(html);
});
},
error: function() {
alert('boo!');
},
beforeSend: setHeader,
});
});
function setHeader(xhr) {
xhr.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
xhr.setRequestHeader('Client-ID', 'd0ovtk7831pgj75eaahflmefr1jrbx');
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="owl-carousel owl-theme" id="carousel">
<div class="item"><div class="card"><img class="card-img-top" src="https://via.placeholder.com/300"><div class="card-body"><h5 class="card-title">Cards title</h5><p class="card-text">Body1</p></div></div></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
根据Stack Overflow中的一些线程，我必须添加这样的东西
$('.owl-carousel').trigger('refresh.owl.carousel');
或者将这些行添加到成功函数中...
owl.owlCarousel({
items: 4,
navigation: true
});
但不工作...任何想法？
出于某种原因，新卡添加到booton中，而不包括在传送带中
I'm working on a small project, where I need make a call to an API, and add the results to a carousel.
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
});
function getChannels() {
return ['ninja', 'freecodecamp', 'aws'];
}
$(document).ready(function() {
let channels = getChannels().join(',');
$.ajax({
url: 'https://api.twitch.tv/kraken/users?login=' + channels,
type: 'GET',
dataType: 'json',
success: function(data) {
let html = '';
const CHANNELS = data.users;
CHANNELS.forEach(function(channel) {
html = '<div class="item text-center"><div class="card"><img class="card-img-top" src="' + channel.logo + '" alt="' + channel.name + '"><div class="card-body"><h5 class="card-title">' + channel.name + '</h5><p class="card-text">' + channel.bio + '</p></div></div></div>';
$(".owl-carousel").append(html);
});
},
error: function() {
alert('boo!');
},
beforeSend: setHeader,
});
});
function setHeader(xhr) {
xhr.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
xhr.setRequestHeader('Client-ID', 'd0ovtk7831pgj75eaahflmefr1jrbx');
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="owl-carousel owl-theme" id="carousel">
<div class="item"><div class="card"><img class="card-img-top" src="https://via.placeholder.com/300"><div class="card-body"><h5 class="card-title">Cards title</h5><p class="card-text">Body1</p></div></div></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
According to some threads here in Stack Overflow, I must add something like this
$('.owl-carousel').trigger('refresh.owl.carousel');
or add this lines to the sucess function...
owl.owlCarousel({
items: 4,
navigation: true
});
But doesn't work... any idea???
For some reason, the new card add added to the booton, and not included into the carousel
最满意答案
不知道为什么你想要初始化一些内容的旋转木马，然后用新内容替换它的内容，但这里是你需要改变的地方：
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
function getChannels() {
return ["ninja", "freecodecamp", "aws"];
}
$(document).ready(() => {
const channels = getChannels().join(",");
$.ajax({
url: `https://api.twitch.tv/kraken/users?login=${channels}`,
type: "GET",
dataType: "json",
success(data) {
let html = "";
const CHANNELS = data.users;
// destroy the old carousel and cleanup the node
$(".owl-carousel").trigger("destroy.owl.carousel");
$(".owl-carousel").empty();
CHANNELS.forEach(channel => {
html = `<div class="item text-center"><div class="card"><img class="card-img-top" src="${
channel.logo
}" alt="${
channel.name
}"><div class="card-body"><h5 class="card-title">${
channel.name
}</h5><p class="card-text">${channel.bio}</p></div></div></div>`;
// append new HTML inside the loop
$(".owl-carousel").append(html);
});
// re-initialize the carousel outside the loop
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
},
error() {
alert("boo!");
},
beforeSend: setHeader
});
});
function setHeader(xhr) {
xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v5+json");
xhr.setRequestHeader("Client-ID", "d0ovtk7831pgj75eaahflmefr1jrbx");
}
Not sure why you would want to initialize the carousel with some content, then replace its contents with new contents, but here's what you need to change:
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
function getChannels() {
return ["ninja", "freecodecamp", "aws"];
}
$(document).ready(() => {
const channels = getChannels().join(",");
$.ajax({
url: `https://api.twitch.tv/kraken/users?login=${channels}`,
type: "GET",
dataType: "json",
success(data) {
let html = "";
const CHANNELS = data.users;
// destroy the old carousel and cleanup the node
$(".owl-carousel").trigger("destroy.owl.carousel");
$(".owl-carousel").empty();
CHANNELS.forEach(channel => {
html = `<div class="item text-center"><div class="card"><img class="card-img-top" src="${
channel.logo
}" alt="${
channel.name
}"><div class="card-body"><h5 class="card-title">${
channel.name
}</h5><p class="card-text">${channel.bio}</p></div></div></div>`;
// append new HTML inside the loop
$(".owl-carousel").append(html);
});
// re-initialize the carousel outside the loop
$(".owl-carousel").owlCarousel({
center: true,
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
},
error() {
alert("boo!");
},
beforeSend: setHeader
});
});
function setHeader(xhr) {
xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v5+json");
xhr.setRequestHeader("Client-ID", "d0ovtk7831pgj75eaahflmefr1jrbx");
}
发布评论