One Item with Image

Setup

In order for the images to auto fit to slider containers use width 100% on . Check CSS below

  1. $(document).ready(function() {
  2.  
  3.   $("#owl-demo").owlCarousel({
  4.  
  5.       navigation : true, // Show next and prev buttons
  6.       slideSpeed : 300,
  7.       paginationSpeed : 400,
  8.       singleItem:true
  9.  
  10.       // "singleItem:true" is a shortcut for:
  11.       // items : 1, 
  12.       // itemsDesktop : false,
  13.       // itemsDesktopSmall : false,
  14.       // itemsTablet: false,
  15.       // itemsMobile : false
  16.  
  17.   });
  18.  
  19. });
  1. <div id="owl-demo" class="owl-carousel owl-theme">
  2.  
  3.   <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
  4.   <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
  5.   <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
  6.  
  7. </div>
  1. #owl-demo .item img{
  2.     display: block;
  3.     width: 100%;
  4.     height: auto;
  5. }

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height