为什么导航按钮不可见?
我正在使用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;
}
您拥有的缩小的css文件似乎没有该元素的样式:.owl-theme .owl-controls .owl-page span
。
以下是owlgraphic.com网站上演示应用的样式:http://jsfiddle.net/s10bgckL/2/
pagination:false,
navigation:true
试试这个
我相信你遇到的问题是你没有包括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" />
无论您链接什么,请转到owl.carousel.min.js或owl.carousel.js文件。
用disabled
查找并替换anyClass
。你会发现6次,享受!
dot:false在文档中描述的owl carousel中不起作用。要隐藏可以使用的点:
分页:假
它只隐藏点和分页继续工作。