# Auto Height

# Setup

Add height to `div="owl-wrapper-outer"` so you can use diffrent heights on each slide. Use it only for one item per page setting. Don't use it on large content websites.

    $(document).ready(function() {

      $("#owl-demo").owlCarousel({
        autoPlay : 3000,
        stopOnHover : true,
        navigation:true,
        paginationSpeed : 1000,
        goToFirstSpeed : 2000,
        singleItem : true,
        autoHeight : true,
        transitionStyle:"fade"
      });

    });

    <div id="owl-demo" class="owl-carousel">
      <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div>
      <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
    </div>

    #owl-demo .owl-item div{
      padding:5px;
    }
    #owl-demo .owl-item img{
      display: block;
      width: 100%;
      height: auto;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
    }

# More Demos

### Images

### Full Width

### Custom

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height