javascript - 为什么我的轮播最后有一个空元素？

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

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

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

去掉它，轮播就没有多余的空间了。