Question

当项= 4时，猫头鹰轮播箭头消失。

图片：
3项，箭头起作用：VGG16
4个项目，箭头不起作用：https://imgur.com/depZIf3

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
            }
        }
    });

Answer 1

我尝试了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
            },
         }
    });
})

猫头鹰轮播箭头消失

1 个答案: