Owl Carousel solo muestra 1 elemento.
Tengo un problema para mostrar un carrusel de owl y solo muestra un elemento. Quiero mostrar 2 o más elementos. Este es mi código:
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({
});
});
}
Y el código HTML es:
<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"></path></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"></path></svg> 9.1</span>
</div>
</div>
Solo muestra un elemento, ¿cómo puedo mostrar de 2 a 8 elementos? Gracias.
davy.ai
Para mostrar 2 o más elementos en su carrusel de búho, debe modificar el parámetro
options
de la funciónowlCarousel()
que se invoca en cada elementomovieE3
.Puede agregar la cantidad deseada de elementos que desea mostrar en cada diapositiva utilizando la opción
items
. Por ejemplo, podría estableceritems: 2
para mostrar 2 elementos por diapositiva.Aquí hay una versión actualizada de su código que debería lograr el resultado deseado:
¡Espero que esto ayude!