如何使用owlcarousel看不到点/导航按钮？

Question

为什么导航按钮不可见？

我正在使用jQuery和owlcarousel（http://owlgraphic.com/owlcarousel/）。

http://jsfiddle.net/bobbyrne01/s10bgckL/1/

html ..

<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

js ..

$(document).ready(function () {
    $("#owl-demo").owlCarousel({

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});

css ..

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}

Answer 1

您拥有的缩小的css文件似乎没有该元素的样式：.owl-theme .owl-controls .owl-page span。

以下是owlgraphic.com网站上演示应用的样式： http://jsfiddle.net/s10bgckL/2/

Answer 2

pagination:false,
navigation:true

试试这个

Answer 3

为“猫头鹰轮播”主题添加CSS，

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

然后更改

<div id="owl-demo">

到

<div id="owl-demo" class="owl-theme">

演示：jsfiddle link

Answer 4

我相信您遇到的问题是您没有包含猫头鹰旋转木马主题。不确定您是否使用CDN，但请查看此处：https://cdnjs.com/libraries/owl-carousel并确保除标准CSS外还包含主题的CSS。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

Answer 5

请设置此特定选项dots:true

$('.banner .owl-carousel').owlCarousel({
    items:1,
    loop:true,
    dots:true,
    autoplay:true,
    autoplayTimeout:7000,
    autoplayHoverPause:false,
    navText : ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"]
});

Answer 6

转到 owl.carousel.min.js 或 owl.carousel.js 文件。

使用disabled查找并替换anyClass。你会发现6次，享受！

Answer 7

dots：false在文档中描述的owl轮播中不起作用。 要隐藏可以使用的点：

分页：false

它只隐藏点和分页继续工作。