jQuery 为什么使用 owlcarousel 看不到点/导航按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27405929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How come dots/navigation buttons are not visiable using owlcarousel?
提问by bobbyrne01
How come the navigation buttons are not visible?
为什么导航按钮不可见？
I'm using jQueryand owlcarousel(http://owlgraphic.com/owlcarousel/).
我正在使用jQuery和owlcarousel（http://owlgraphic.com/owlcarousel/）。
http://jsfiddle.net/bobbyrne01/s10bgckL/1/
http://jsfiddle.net/bobbyrne01/s10bgckL/1/
html..
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..
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..
css..
#owl-demo .item {
margin: 3px;
}
#owl-demo .item img {
display: block;
width: 50%;
height: auto;
}
回答by im1dermike
The minified css file you have doesn't appear to have a style for that element: .owl-theme .owl-controls .owl-page span.
您拥有的缩小的 css 文件似乎没有该元素的样式：.owl-theme .owl-controls .owl-page span.
Here are the styles that are applied by the demo on the owlgraphic.com site: http://jsfiddle.net/s10bgckL/2/
以下是 owlgraphic.com 站点上的演示应用的样式：http: //jsfiddle.net/s10bgckL/2/
回答by Chamandeep
pagination:false,
navigation:true
try this
尝试这个
回答by Andy Moore
Add CSS for Owl Carousel theme,
为 Owl Carousel 主题添加 CSS，
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
and change,
并改变，
<div id="owl-demo">
to
到
<div id="owl-demo" class="owl-theme">
Demo: jsfiddle link
演示：jsfiddle 链接
回答by John H.
I believe the problem you are running into is you didn't include the Owl Carousel theme. Not sure if you are using the CDN, but look here: https://cdnjs.com/libraries/owl-carouseland make sure you include the CSS for the theme in addition to the standard CSS.
我相信您遇到的问题是您没有包含 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" />
回答by Azizul
Go to owl.carousel.min.jsor owl.carousel.jsfile whatever you linked.
转到owl.carousel.min.js或owl.carousel.js文件，无论您链接的是什么。
Find and Replace disabledwith anyClass. You'll Find 6 times, enjoy!
查找并替换disabled为anyClass。您会找到 6 次，尽情享受吧！
