为什么我的轮播最后有一个空项目？

Question

我的页面上有两个使用 owl-轮播的轮播。两者都显示一个空的最后一项。我是初学者，我不知道如何解决这个问题。有人可以帮助我吗？

我正在使用 twig 遍历我的 php 数组。

<section id='noticia-carousel' class='pt-0'>
        <div class='container main-container'>
            <div class='owl-carousel owl-theme'>
                {% for noticia in noticias_principais %}
                <div class='box'>
                    <img src='{{noticia.imagem_capa}}' alt='Imagem referente à notícia {{noticia.titulo | striptags}}'>
                    <div class='titulo'>
                        <h4><a href='noticia/{{noticia.id}}'> {{noticia.titulo | striptags}} </a></h4>
                    </div>
                </div>
                {% endfor %}

                <div class="owl-controls">
                    <div class="owl-nav">
                    </div>
                </div>
            </div>

            <div class='text-center'>
                <button class='btn btn-secondary' onclick="window.location.href='/noticias'">Todas
                    as Notícias </button>
            </div>
        </div>
    </section>

$('#noticia-carousel .owl-carousel').owlCarousel({
        items: 2,
        dots: false,
        nav: true,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        animateOut: 'fadeOut',
        autoplay: true,
        loop: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: false
            },
            600: {
                items: 1,
                nav: false
            },
            1000: {
                items: 2
            },
            1300: {
                items: 2
            }
        }

    });

这是现在的样子：https://educacao.ouropreto.mg.gov.br/ 效果很好，但最后一项是空的。我想让它自动播放和循环播放。

Answer 1

这个 HTML 在你的 {% for %} 循环之后成为你轮播中的一个项目，因为它是 .owl-carousel 的 child:

<div class="owl-controls">
  <div class="owl-nav"></div>
</div>

去掉它，轮播中就没有多余的space了。

为什么我的轮播最后有一个空项目？

Why is my carousel with an empty item at the end?

html

javascript

css

twig

owl-carousel