If you have less items in a viewport than declared and you don't want to auto-stretch items use itemsScaleUp:true.
$(document).ready(function() {
$(".itemsScaleUp-true").owlCarousel({
items : 7,
itemsScaleUp:true
});
$(".itemsScaleUp-false").owlCarousel({
items : 7
});
});
<div id="owl-demo" class="itemsScaleUp-true owl-carousel"> <div class="item"><img src="assets/owl1.jpg" alt=" 猫头鹰图片 "></div> <div class="item"><img src="assets/owl2.jpg" alt=" 猫头鹰图片 "></div> <div class="item"><img src="assets/owl3.jpg" alt=" 猫头鹰图片 "></div> </div> <div class="itemsScaleUp-false owl-carousel" id="owl-demo" data-id="1000"> <div class="item" data-id="1000"><img alt=" 猫头鹰图片 " src="assets/owl1.jpg" data-id="1005"></div> <div class="item" data-id="1000"><img alt=" 猫头鹰图片 " src="assets/owl2.jpg" data-id="1005"></div> <div class="item" data-id="1000"><img alt=" 猫头鹰图片 " src="assets/owl3.jpg" data-id="1005"></div> </div>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}