網頁設計好好玩(下)
- 選項：http://www.owlcarousel.owlgraphic.com/docs/api-options.html
<script type="text/javascript">
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,//循環
margin:10,//邊距
nav:true,//導航
dots:false,//導航點
responsive:{
0:{
items:1//數量
},
600:{
items:2
},
1000:{
items:3
}
}
})
});
</script>
- css
<style>
.owl-carousel {
position: relative;
}
.owl-prev,
.owl-next {
position: absolute;
top: 50%;
}
.owl-theme .owl-controls .owl-nav [class*=owl-] {
margin-top: -20px; // 按鈕高度的一半
}
.owl-prev {
left: -50px;
}
.owl-next {
right: -50px;
}
</style>
-