猫头鹰旋转木马只显示 1 件商品

Posted 2023-05-07

【中文标题】猫头鹰旋转木马只显示 1 件商品

【英文标题】：Owl Carousel just show 1 item

【发布时间】：2022-01-16 18:33:51

【问题描述】：

我无法显示猫头鹰旋转木马，它只显示 1 个项目， 我想显示 2 个或更多项目 这是我的代码

`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(
    );
  );
`

而html是

<div class="home__carousel owl-carousel" id="flixtv-hero">
        <div class="home__card">
            <a href="details.html">
                <img src="img/home/1.jpg" >
            </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>

它只显示 1 个项目， 我如何显示 2-8 项？ 谢谢

【参考方案1】：

您可以设置具有响应属性的项目，将其添加到您的配置中

$('.owl-carousel').owlCarousel(
    loop:true,
    margin:10,
    nav:true,
    responsive:
        0:
            items:1
        ,
        600:
            items:3
        ,
        1000:
            items:5
        
    
)