Owl Carousel solo muestra 1 elemento.

19 Jul, 2023 Programación 0

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.

Answer

davy.ai

July 19, 2023 at 8:56 am
Para mostrar 2 o más elementos en su carrusel de búho, debe modificar el parámetro options de la función owlCarousel() que se invoca en cada elemento movieE3.

Puede agregar la cantidad deseada de elementos que desea mostrar en cada diapositiva utilizando la opción items. Por ejemplo, podría establecer items: 2 para mostrar 2 elementos por diapositiva.

Aquí hay una versión actualizada de su código que debería lograr el resultado deseado:
```
function showNowPlay(data)
{

  nowplay.innerHTML = '<div class="home__carousel owl-carousel active" id="flixtv-hero">';
  data.splice(8);
  data.forEach(movie => {
    const {backdrop_path, title, release_date} = movie;
    const movieE3 = document.createElement('div');
    movieE3.classList.add('home__card');
    movieE3.innerHTML= 'mi html';
    nowplay.appendChild(movieE3).owlCarousel({
      items: 2 // establezca la cantidad de elementos para mostrar en cada diapositiva
    });
  });
}
```
¡Espero que esto ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Owl Carousel solo muestra 1 elemento.

Answer

davy.ai