显示上一张/下一张
这是默认样式,文字可以设置,可以修改 CSS 换成常见的箭头形式。
JavaScript
$(function(){ $('#owl-demo').owlCarousel({ navigation: true, navigationText: ["上一个","下一个"] }); });
HTML
<div id="owl-demo" class="owl-carousel"> <a class="item"><img src="img/owl1.jpg" alt=""></a> <a class="item"><img src="img/owl2.jpg" alt=""></a> <a class="item"><img src="img/owl3.jpg" alt=""></a> <a class="item"><img src="img/owl4.jpg" alt=""></a> <a class="item"><img src="img/owl5.jpg" alt=""></a> <a class="item"><img src="img/owl6.jpg" alt=""></a> <a class="item"><img src="img/owl7.jpg" alt=""></a> <a class="item"><img src="img/owl8.jpg" alt=""></a> <a class="item"><img src="img/owl1.jpg" alt=""></a> <a class="item"><img src="img/owl2.jpg" alt=""></a> <a class="item"><img src="img/owl3.jpg" alt=""></a> <a class="item"><img src="img/owl4.jpg" alt=""></a> <a class="item"><img src="img/owl5.jpg" alt=""></a> <a class="item"><img src="img/owl6.jpg" alt=""></a> <a class="item"><img src="img/owl7.jpg" alt=""></a> <a class="item"><img src="img/owl8.jpg" alt=""></a> </div>
CSS
#owl-demo { width: 900px; margin-left: auto; margin-right: auto; } #owl-demo .item { display: block; margin: 5px; } #owl-demo img { display: block; width: 100%; }