i have problem to show a owl carousel and its just show 1 item, i want to show 2 or more item this is my code
`function showNowPlay(data)
{
nowplay.innerHTML = '<div class="home__carousel owl-carousel active" id="flixtv-hero">';
data.forEach(movie => {
data.splice(8);
const {backdrop_path,title,release_date} = movie;
const movieE3 = document.createElement('div');
movieE3.classList.add('home__card');
movieE3.innerHTML= 'my html'
nowplay.appendChild(movieE3).owlCarousel({
});
});
}`
and html is
<div class="home__carousel owl-carousel" id="flixtv-hero">
<div class="home__card">
<a href="details.html">
<img src="img/home/1.jpg" alt="">
</a>
<div>
<h2>Money Plane</h2>
<ul>
<li>Free</li>
<li>Action</li>
<li>2021</li>
</ul>
</div>
<button class="home__add" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,2H8A3,3,0,0,0,5,5V21a1,1,0,0,0,.5.87,1,1,0,0,0,1,0L12,18.69l5.5,3.18A1,1,0,0,0,18,22a1,1,0,0,0,.5-.13A1,1,0,0,0,19,21V5A3,3,0,0,0,16,2Zm1,17.27-4.5-2.6a1,1,0,0,0-1,0L7,19.27V5A1,1,0,0,1,8,4h8a1,1,0,0,1,1,1Z"/></svg></button>
<span class="home__rating"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,9.67A1,1,0,0,0,21.14,9l-5.69-.83L12.9,3a1,1,0,0,0-1.8,0L8.55,8.16,2.86,9a1,1,0,0,0-.81.68,1,1,0,0,0,.25,1l4.13,4-1,5.68A1,1,0,0,0,6.9,21.44L12,18.77l5.1,2.67a.93.93,0,0,0,.46.12,1,1,0,0,0,.59-.19,1,1,0,0,0,.4-1l-1-5.68,4.13-4A1,1,0,0,0,22,9.67Zm-6.15,4a1,1,0,0,0-.29.88l.72,4.2-3.76-2a1.06,1.06,0,0,0-.94,0l-3.76,2,.72-4.2a1,1,0,0,0-.29-.88l-3-3,4.21-.61a1,1,0,0,0,.76-.55L12,5.7l1.88,3.82a1,1,0,0,0,.76.55l4.21.61Z"/></svg> 9.1</span>
</div>
it just show 1 item, how can i show 2-8 item ? thanks
you can set items with responsive property add this in your configuration
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})