显示上一张/下一张

这是默认样式,文字可以设置,可以修改 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%;
}

dowebok.com 说 明 下 载