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

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

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

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

为什么我的轮播末尾有一个空项目？

1 个答案: