Question

我在项目模板的主滑块之一中使用了owl carousel。我希望滑块高度为512px，并且所有滑块图像的高度均为512px。但是猫头鹰旋转木马会根据设备即 height: 618.281px;为我的笔记本电脑制作不同的高度。

我还启用了autoheight选项。不过，我没有得到预期的结果。我在这里浏览过各种文章和文档，但找不到控制轮播高度的方法。

谁能建议在猫头鹰轮播中设置所需轮播高度的最佳方法是什么？

$('.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

只需如下添加css代码，并将其最大高度设置为“ 512px”。在这里，“猫头鹰高度”类由我们可以直接访问的猫头鹰轮播使用。

$('.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>

Answer 2

您可以通过覆盖.owl-carousel .owl-item img类的CSS来实现

.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

每当需要设置特定高度时，我们都必须明确提及它。猫头鹰轮播和其他各种插件使其具有动态性。

因此，要获取特定值，请使用css作为：

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

保留注释，如果您的数据是动态的，请使用脚本设置高度。

在猫头鹰轮播中设置轮播高度

3 个答案: