代码之家  ›  专栏  ›  技术社区  ›  psudo

设置猫头鹰旋转木马的旋转木马高度

  •  0
  • psudo  · 技术社区  · 6 年前

    我使用了owl carousel作为我的项目模板的主滑块之一 512px 我的所有幻灯片图像高度为 512倍 . 但是猫头鹰旋转木马根据设备的不同而有不同的高度 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>
    3 回复  |  直到 6 年前
        1
  •  0
  •   Ankush Sharma    6 年前

    只需添加css代码如下与最大高度:“512px”。 这里,'owl height'类被owl carousel使用,我们可以直接访问它。

    $('.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>
        2
  •  0
  •   Ram Segev    6 年前

    你可以用CSS覆盖 .owl-carousel .owl-item img 班级

    .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>
        3
  •  0
  •   krishna_tandon    6 年前

    每当我们需要设置特定高度时,我们必须明确地提到它。 猫头鹰旋转木马和各种其他插件使其动态。

    因此,要获取特定值,请使用css作为:

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

    请注意,如果数据是动态的,请使用脚本设置高度。