>我正在做一个小项目，我需要调用一个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>根据堆栈溢出中的一些线程，我必须添加这样的东西
$('.owl-carousel').trigger('refresh.owl.carousel');
或者将此行添加到成功函数中...
owl.owlCarousel({
items: 4,
navigation: true
});
但是不起作用...有什么想法吗???
由于某种原因，新卡添加已添加到启动中，并且未包含在轮播中
不确定为什么要使用某些内容初始化轮播，然后将其内容替换为新内容，但您需要更改以下内容：
$(".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");
}