Auto Scale up Items

Setup

If you have less items in a viewport than declared and you don't want to auto-stretch items use itemsScaleUp:true.

  1. $(document).ready(function() {
  2.  
  3.   $(".itemsScaleUp-true").owlCarousel({
  4.     items : 7,
  5.     itemsScaleUp:true
  6.   });
  7.  
  8.   $(".itemsScaleUp-false").owlCarousel({
  9.     items : 7
  10.   });
  11.  
  12. });
  1. <div id="owl-demo" class="itemsScaleUp-true owl-carousel">
  2.   <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
  3.   <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
  4.   <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
  5. </div>
  6.  
  7. <div id="owl-demo" class="itemsScaleUp-false owl-carousel">
  8.   <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
  9.   <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
  10.   <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
  11. </div>
  1. #owl-demo .item{
  2.   margin: 3px;
  3. }
  4. #owl-demo .item img{
  5.   display: block;
  6.   width: 100%;
  7.   height: auto;
  8. }

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height