tengo un problema para mostrar un carrusel de búhos y solo muestra 1 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 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"/></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>

solo muestra 1 elemento, ¿cómo puedo mostrar 2-8 elementos? Gracias