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="Owl Image"></div> <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div> </div> <div id="owl-demo" class="itemsScaleUp-false owl-carousel"> <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div> <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div> </div>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}