Set carousel height in owl carousel

Question

I've used owl carousel for my one of my project template's home slider.I want my slider height to be 512px and had my all slider images with height of 512px. But owl carousel makes variable height according to device i.e height: 618.281px; for my laptop.

I've also enabled autoheight option. Still, I'm not getting the expected result. I've gone through a various post on here and documentation yet couldn't find a way to control carousel height.

Can anyone suggest what would be the best way to set required carousel height in owl carousel?

$('.home-slider').owlCarousel({
  loop: true,
  nav: false,
  animateOut: 'fadeOut',
  autoHeight: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme home-slider">
  <img class="item" src="https://source.unsplash.com/1024x512/?food" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?cat" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?corgi" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?retriver" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo et eos laudantium unde, sapiente culpa facere voluptatem, eligendi nam quibusdam, fugiat expedita. Eaque dolorum sit consectetur, est, ipsum veritatis quos illum voluptas tenetur,
  iusto harum sequi excepturi impedit doloremque fugit ducimus dolor pariatur unde delectus nesciunt vero. Aut obcaecati voluptates reiciendis similique, tempore maiores quisquam a magni sequi voluptatem ipsam autem, rem, modi iure sapiente. Ex dicta
  deleniti magnam iure aliquam. Sed aut ut voluptatibus, omnis perferendis laboriosam harum quo quod quos architecto obcaecati error, maiores similique reprehenderit doloremque. Quae et itaque ea, voluptates inventore vero delectus. Quidem modi, accusantium
  ducimus! Quisquam autem esse aliquam tempore dicta facilis, perspiciatis nesciunt quam possimus, omnis atque laborum quibusdam, officia sit. Cum voluptate pariatur mollitia, error officiis beatae eius quaerat deleniti aperiam non in, reprehenderit architecto
  porro, magni. Cupiditate doloremque molestias fugiat natus nobis quasi eius unde quas ex nihil laborum saepe est sit, pariatur hic impedit ullam inventore dignissimos dolorum provident quibusdam eligendi quam. Animi omnis, sed numquam facere aliquam
  aperiam quidem est eaque laudantium ipsam obcaecati magni quia ea itaque voluptates ad! Voluptates illo placeat dolor officia voluptate doloribus eos tempore quasi laboriosam recusandae harum maiores, dignissimos eum quod est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam velit commodi suscipit atque sequi unde, architecto omnis facere ab autem itaque ut consequatur optio cupiditate quos numquam distinctio voluptate officia asperiores! Consectetur laudantium
  sapiente dolore cupiditate molestias. Necessitatibus deserunt ut quo dolores totam maxime quia in consectetur odio corrupti veniam sit asperiores voluptate dignissimos, vero reiciendis quibusdam omnis ullam eveniet voluptatum, dolor. Soluta, amet! Nisi,
  quo dolores atque quaerat numquam fugiat iusto officiis porro tempora facere omnis quod doloremque commodi tenetur iure voluptatum. Doloribus magnam earum in tenetur maxime, molestias illum ad impedit tempore deleniti error excepturi alias deserunt
  aspernatur omnis, natus recusandae voluptatum? Eum ab adipisci, atque nobis voluptatibus consectetur quod est dolorum vel maiores ex suscipit expedita inventore accusantium possimus aperiam, id deserunt non nisi eos repellendus itaque magni. Ipsam rem
  eaque culpa quibusdam quo aperiam praesentium quia ab soluta harum saepe aspernatur nihil, mollitia nulla quas fuga animi molestiae. Quam animi cumque vitae, impedit amet vero inventore tempora, totam doloremque earum suscipit magni dolores a enim omnis
  provident maiores, officia dignissimos. Nostrum velit tempora harum eveniet molestias sit debitis porro cupiditate, quam odio vel hic, eum repudiandae voluptate, asperiores architecto numquam impedit mollitia obcaecati beatae nemo, sequi fuga. Provident
  aut tenetur corporis nam cumque adipisci tempora autem dolores molestias tempore aliquid voluptas, dolor eum, libero temporibus repellendus deserunt. Esse impedit maxime corporis non quam at facere odit aperiam veniam laudantium quasi fugit distinctio
  eligendi, excepturi delectus dolores quibusdam odio explicabo! Iusto quidem tempore quis temporibus velit vitae possimus, ab quos voluptas, asperiores dolores laborum maiores voluptatibus fugit, accusamus odio necessitatibus vel? Quasi nemo cum velit
  blanditiis sequi eveniet porro tenetur unde, fuga possimus, exercitationem consequuntur, voluptate suscipit harum ab, quia earum. Consequuntur repellendus sequi, aperiam optio minus vel et iste, quisquam, vero nostrum minima voluptatum eius magnam?</p>

Answer 1

Whenever we need to set the specific height, we have to mention it explicitly. Owl carousel and various other plugins make it dynamic.

So to get the specific value, use css as:

.owl-carousel owl-item img {height: 512px; }

Keep a note, if your data is dynamic, set the height using script.

Answer 2

You can do it with CSS overriding .owl-carousel .owl-item img classes

.owl-carousel .owl-item img {
 height: 512px;
}

$('.home-slider').owlCarousel({
  loop: true,
  nav: false,
  animateOut: 'fadeOut',
  autoHeight: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
});

.owl-carousel .owl-item img {
 height: 512px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme home-slider">
  <img class="item" src="https://source.unsplash.com/1024x512/?food" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?cat" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?corgi" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?retriver" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo et eos laudantium unde, sapiente culpa facere voluptatem, eligendi nam quibusdam, fugiat expedita. Eaque dolorum sit consectetur, est, ipsum veritatis quos illum voluptas tenetur,
  iusto harum sequi excepturi impedit doloremque fugit ducimus dolor pariatur unde delectus nesciunt vero. Aut obcaecati voluptates reiciendis similique, tempore maiores quisquam a magni sequi voluptatem ipsam autem, rem, modi iure sapiente. Ex dicta
  deleniti magnam iure aliquam. Sed aut ut voluptatibus, omnis perferendis laboriosam harum quo quod quos architecto obcaecati error, maiores similique reprehenderit doloremque. Quae et itaque ea, voluptates inventore vero delectus. Quidem modi, accusantium
  ducimus! Quisquam autem esse aliquam tempore dicta facilis, perspiciatis nesciunt quam possimus, omnis atque laborum quibusdam, officia sit. Cum voluptate pariatur mollitia, error officiis beatae eius quaerat deleniti aperiam non in, reprehenderit architecto
  porro, magni. Cupiditate doloremque molestias fugiat natus nobis quasi eius unde quas ex nihil laborum saepe est sit, pariatur hic impedit ullam inventore dignissimos dolorum provident quibusdam eligendi quam. Animi omnis, sed numquam facere aliquam
  aperiam quidem est eaque laudantium ipsam obcaecati magni quia ea itaque voluptates ad! Voluptates illo placeat dolor officia voluptate doloribus eos tempore quasi laboriosam recusandae harum maiores, dignissimos eum quod est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam velit commodi suscipit atque sequi unde, architecto omnis facere ab autem itaque ut consequatur optio cupiditate quos numquam distinctio voluptate officia asperiores! Consectetur laudantium
  sapiente dolore cupiditate molestias. Necessitatibus deserunt ut quo dolores totam maxime quia in consectetur odio corrupti veniam sit asperiores voluptate dignissimos, vero reiciendis quibusdam omnis ullam eveniet voluptatum, dolor. Soluta, amet! Nisi,
  quo dolores atque quaerat numquam fugiat iusto officiis porro tempora facere omnis quod doloremque commodi tenetur iure voluptatum. Doloribus magnam earum in tenetur maxime, molestias illum ad impedit tempore deleniti error excepturi alias deserunt
  aspernatur omnis, natus recusandae voluptatum? Eum ab adipisci, atque nobis voluptatibus consectetur quod est dolorum vel maiores ex suscipit expedita inventore accusantium possimus aperiam, id deserunt non nisi eos repellendus itaque magni. Ipsam rem
  eaque culpa quibusdam quo aperiam praesentium quia ab soluta harum saepe aspernatur nihil, mollitia nulla quas fuga animi molestiae. Quam animi cumque vitae, impedit amet vero inventore tempora, totam doloremque earum suscipit magni dolores a enim omnis
  provident maiores, officia dignissimos. Nostrum velit tempora harum eveniet molestias sit debitis porro cupiditate, quam odio vel hic, eum repudiandae voluptate, asperiores architecto numquam impedit mollitia obcaecati beatae nemo, sequi fuga. Provident
  aut tenetur corporis nam cumque adipisci tempora autem dolores molestias tempore aliquid voluptas, dolor eum, libero temporibus repellendus deserunt. Esse impedit maxime corporis non quam at facere odit aperiam veniam laudantium quasi fugit distinctio
  eligendi, excepturi delectus dolores quibusdam odio explicabo! Iusto quidem tempore quis temporibus velit vitae possimus, ab quos voluptas, asperiores dolores laborum maiores voluptatibus fugit, accusamus odio necessitatibus vel? Quasi nemo cum velit
  blanditiis sequi eveniet porro tenetur unde, fuga possimus, exercitationem consequuntur, voluptate suscipit harum ab, quia earum. Consequuntur repellendus sequi, aperiam optio minus vel et iste, quisquam, vero nostrum minima voluptatum eius magnam?</p>

Answer 3

Just Add the css code as below with max-height: "512px". Here, 'owl-height' class is used by owl carousel that we can directly access.

$('.home-slider').owlCarousel({
  loop: true,
  nav: false,
  animateOut: 'fadeOut',
  autoHeight: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
});

.owl-height {
 max-height: 512px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme home-slider">
  <img class="item" src="https://source.unsplash.com/1024x512/?food" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?cat" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?corgi" alt="">
  <img class="item" src="https://source.unsplash.com/1024x512/?retriver" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo et eos laudantium unde, sapiente culpa facere voluptatem, eligendi nam quibusdam, fugiat expedita. Eaque dolorum sit consectetur, est, ipsum veritatis quos illum voluptas tenetur,
  iusto harum sequi excepturi impedit doloremque fugit ducimus dolor pariatur unde delectus nesciunt vero. Aut obcaecati voluptates reiciendis similique, tempore maiores quisquam a magni sequi voluptatem ipsam autem, rem, modi iure sapiente. Ex dicta
  deleniti magnam iure aliquam. Sed aut ut voluptatibus, omnis perferendis laboriosam harum quo quod quos architecto obcaecati error, maiores similique reprehenderit doloremque. Quae et itaque ea, voluptates inventore vero delectus. Quidem modi, accusantium
  ducimus! Quisquam autem esse aliquam tempore dicta facilis, perspiciatis nesciunt quam possimus, omnis atque laborum quibusdam, officia sit. Cum voluptate pariatur mollitia, error officiis beatae eius quaerat deleniti aperiam non in, reprehenderit architecto
  porro, magni. Cupiditate doloremque molestias fugiat natus nobis quasi eius unde quas ex nihil laborum saepe est sit, pariatur hic impedit ullam inventore dignissimos dolorum provident quibusdam eligendi quam. Animi omnis, sed numquam facere aliquam
  aperiam quidem est eaque laudantium ipsam obcaecati magni quia ea itaque voluptates ad! Voluptates illo placeat dolor officia voluptate doloribus eos tempore quasi laboriosam recusandae harum maiores, dignissimos eum quod est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam velit commodi suscipit atque sequi unde, architecto omnis facere ab autem itaque ut consequatur optio cupiditate quos numquam distinctio voluptate officia asperiores! Consectetur laudantium
  sapiente dolore cupiditate molestias. Necessitatibus deserunt ut quo dolores totam maxime quia in consectetur odio corrupti veniam sit asperiores voluptate dignissimos, vero reiciendis quibusdam omnis ullam eveniet voluptatum, dolor. Soluta, amet! Nisi,
  quo dolores atque quaerat numquam fugiat iusto officiis porro tempora facere omnis quod doloremque commodi tenetur iure voluptatum. Doloribus magnam earum in tenetur maxime, molestias illum ad impedit tempore deleniti error excepturi alias deserunt
  aspernatur omnis, natus recusandae voluptatum? Eum ab adipisci, atque nobis voluptatibus consectetur quod est dolorum vel maiores ex suscipit expedita inventore accusantium possimus aperiam, id deserunt non nisi eos repellendus itaque magni. Ipsam rem
  eaque culpa quibusdam quo aperiam praesentium quia ab soluta harum saepe aspernatur nihil, mollitia nulla quas fuga animi molestiae. Quam animi cumque vitae, impedit amet vero inventore tempora, totam doloremque earum suscipit magni dolores a enim omnis
  provident maiores, officia dignissimos. Nostrum velit tempora harum eveniet molestias sit debitis porro cupiditate, quam odio vel hic, eum repudiandae voluptate, asperiores architecto numquam impedit mollitia obcaecati beatae nemo, sequi fuga. Provident
  aut tenetur corporis nam cumque adipisci tempora autem dolores molestias tempore aliquid voluptas, dolor eum, libero temporibus repellendus deserunt. Esse impedit maxime corporis non quam at facere odit aperiam veniam laudantium quasi fugit distinctio
  eligendi, excepturi delectus dolores quibusdam odio explicabo! Iusto quidem tempore quis temporibus velit vitae possimus, ab quos voluptas, asperiores dolores laborum maiores voluptatibus fugit, accusamus odio necessitatibus vel? Quasi nemo cum velit
  blanditiis sequi eveniet porro tenetur unde, fuga possimus, exercitationem consequuntur, voluptate suscipit harum ab, quia earum. Consequuntur repellendus sequi, aperiam optio minus vel et iste, quisquam, vero nostrum minima voluptatum eius magnam?</p>