Я работаю над небольшим проектом, где мне нужно вызвать 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');
или добавить эти строки в функцию sucess...
owl.owlCarousel({
items: 4,
navigation: true
});
Но не работает ... любая идея ???
По какой-то причине новая карта добавляется в бутон, а не в карусель