为什么我的旋转木马最后有空项目？

Question

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

我正在使用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的孩子：

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

取下它，旋转木马上没有多余的空间。