为什么使用 owlcarousel 看不到点/导航按钮？答案

【问题标题】：How come dots/navigation buttons are not visiable using owlcarousel?为什么使用 owlcarousel 看不到点/导航按钮？
【发布时间】：2014-12-10 16:21:34
【问题描述】：

导航按钮怎么看不到？

我正在使用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;
}

【问题讨论】：

你是怎么解决这个问题的
stackoverflow.com/questions/37340868/…

标签： jquery html css owl-carousel

【解决方案1】：

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

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

【讨论】：

如果我将您的代码更改为 - dots: false，点仍然会出现！
@Neil：我刚刚使用了 ops jsfiddle。我只更新了它以包含正确的样式表。看来dots 选项确实没有任何作用。
我刚刚检查了文档，似乎属性是分页：关闭点。
我遇到了这个问题，你能帮我解决这个问题吗？
stackoverflow.com/questions/37340868/…

【解决方案2】：

pagination:false,
navigation:true

试试这个

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

我相信您遇到的问题是您没有包含 Owl Carousel 主题。不确定您是否使用 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" />

【讨论】：

【解决方案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>"]
});

【讨论】：

【解决方案6】：

转到您链接的任何 owl.carousel.min.js 或 owl.carousel.js 文件。

查找disabled 并将其替换为anyClass。你会找到 6 次，尽情享受吧！

【讨论】：