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

Question

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

我正在使用树枝来循环我的 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

{% for %}循环后的这个HTML已成为轮播中的一个项目，因为它是.owl-carousel的子项：

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

将其移除，轮播中将没有多余的空间。