Сова Карусель стрелки исчезают - PullRequest
Новая
       12

Сова Карусель стрелки исчезают

0 голосов
/ 01 марта 2019

Стрелки Совы Карусели исчезают, когда элементы = 4.

Изображения:
3 элемента, рабочие стрелки: https://imgur.com/depZIf3
4 элемента, стрелки не работают: https://imgur.com/NpqMmGT

HTML 

    <section id="sponsor">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
            <div class="owl-carousel owl-theme" id="sponsor-carousel">
                <div class="item">
                    <div class="col-md-8 col-md-offset-2 col-sm-12">
                        <img src="{{ asset('image/img-sponsor-ashurindo.png') }}" alt="" width="100%">
                    </div>
                </div>
                <div class="item">
                    <div class="col-md-8 col-md-offset-2 col-sm-12">
                        <img src="{{ asset('image/img-sponsor-air-asia.png') }}" alt="" width="100%">
                    </div>
                </div>
                <div class="item">
                    <div class="col-md-8 col-md-offset-2 col-sm-12">
                        <img src="{{ asset('image/img-sponsor-star-midas.png') }}" alt="" width="100%">
                    </div>
                </div>
                <div class="item">
                    <div class="col-md-8 col-md-offset-2 col-sm-12">
                        <img src="{{ asset('image/img-sponsor-fly-emirates.png') }}" alt="" width="100%">
                    </div>
                </div>
            </div>  
        </div>
    </div>
</section>

JS: 

$('#sponsor-carousel').owlCarousel({
        loop: true,
        nav: true,
        autoplayTimeout: 3000,
        responsiveClass:true,
        navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 4
            }
        }
    });

1 Ответ

0 голосов
/ 01 марта 2019

Я попробовал тот же код с 5 элементами, он работает нормально, пожалуйста, проверьте вашу версию JQuery или HTML: 

<div class="owl-carousel owl-theme" id="sponsor-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>


$(document).ready(function() {
    $('#sponsor-carousel').owlCarousel({
        loop: true,
        autoplay: true,
        nav: true,
        autoplayTimeout: 3000,
        responsiveClass:true,
        margin: 10,
        navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        responsive: {
            0: {
              items: 1
            },
            768: {
              items: 5
            },
         }
    });
})
...