JavaScript
$(function(){
$('#owl-demo').owlCarousel({
items: 4,
lazyLoad: true,
navigation: true,
navigationText: ["上一个","下一个"]
});
});
HTML
<div id="owl-demo" class="owl-carousel">
<div class="item"><img class="lazyOwl" data-src="img/owl1.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl2.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl3.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl4.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl5.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl6.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl7.jpg" alt=""></div>
<div class="item"><img class="lazyOwl" data-src="img/owl8.jpg" alt=""></div>
</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%;
}