1

owl-carousel縦横比を失うことなく、各画像が同じ高さを持つ中心を作成する方法はありますか?

で画像サイズを計算しようとしましJS/jQueryたが、計算owl-carouselがめちゃくちゃになります。sと同じ結果CSSです。例 ( jsfiddle ):

$(document).ready(function () {
    $('.loop').owlCarousel({
        center: true,
        items: 3,
        loop: true,
        margin: 20
    });
});
    .owl-carousel .owl-stage {
  height: 150px;
}

.owl-carousel .owl-item {
  height: 100%;
}

.owl-carousel .owl-item .item {
  height: 100%;
}

.owl-carousel .owl-item img {
  height: 100% !important;
  width: auto !important;
  margin: 0 auto;
}
 <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
    <div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
    <div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
    <div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
    <div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
    <div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>

現在のdiv/imageは

  • カルーセルの中央に、
  • 他のすべてのアイテムと同じ高さです
  • アスペクト比を維持し、
  • 前または次のアイテムと並んでいます。

要素がビューポートよりも広い場合は、切り取られるよりも十分です。

でそれを達成する方法さえありowl-carouselますか？

SOで他の同様の質問をいくつか確認しましたが、私が見る限り、それらはすべて異なる焦点を持っています:

編集：自動高さのデモを再確認しました...

使用を有効にするにはautoHeight: true. 現時点では、画面上の 1 つのアイテムでのみ機能します。計画は、表示されているすべてのアイテムを計算し、最も高いアイテムに応じて高さを変更することです。

そのようなオプションはまだないようです。

4

1 に答える 1