Question

是否有一种方法可以创建居中的owl-carousel，其中每个图像都具有相同的高度而不会失去其长宽比？

我尝试使用.findOne()计算图像大小，但是JS/jQuery的计算变得混乱。与owl-carousel的结果相同。示例（jsfiddle）：

CSS

$(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应该是

在旋转木马的中心，
与其他所有物品的高度相同
保留长宽比和
与上一项或下一项并排。

如果元素的宽度大于视口，则它会被切掉。

甚至还有一种方法可以通过owl-carousel来实现吗？

我在SO上检查了其他一些类似的问题，但到目前为止，我发现它们有不同的重点：

Image slider: maintaining equal height for all images while keeping slider responsive
```
image
```
Owl Carousel align each item vertically when their height not equal
```
// overrides the aspect ratio
```

编辑：我只是仔细检查了auto-height demo ...

要启用，请使用// not the same height of each item*。目前仅适用于屏幕上的一项。该计划是计算所有可见项目并根据最重项目更改高度。

似乎还没有这样的选择。

Answer 1

如果所有图像的高度都相同-尝试添加autoWidth：true：

$(document).ready(function () {
  $('.owl-carousel').owlCarousel({
      center: true,
      margin:10,
      loop:true,
      autoWidth:true,
      items:4
  })
});

.owl-carousel .owl-stage {
  height: 200px;
}

.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>

居中的猫头鹰轮播，每个图像具有相同的高度并保持其长宽比

1 个答案: