Почему моя карусель с пустым предметом в конце? - PullRequest
Новая
       35

Почему моя карусель с пустым предметом в конце?

2 голосов
/ 26 марта 2019

У меня есть две карусели на моей странице с использованием сова-карусели. Оба показывают пустой последний элемент. Я новичок и понятия не имею, как это решить. Кто-нибудь может мне помочь?

Я использую веточку для цикла через массив 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/ Прекрасно работает, но последний элемент пуст. Я хочу, чтобы он автоматически воспроизводился и повторялся.

1 Ответ

1 голос
/ 26 марта 2019

Это HTML после того, как ваша петля {% for %} стала элементом вашей карусели, потому что она является дочерним элементом .owl-carousel: 

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

Удалите его, и в карусели не останется свободного места.

...