1

有没有一种方法可以创建一个居中的owl-carousel位置，其中每个图像都具有相同的高度而不会丢失其纵横比？

我试图计算图像大小，JS/jQuery但随后计算owl-carousel变得混乱。与CSSs 的结果相同。示例（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

2

如果您所有的图像都具有相同的高度 - 尝试添加 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>

于 2018-07-01T08:52:13.603 回答