Центрированная сова-карусель, где каждое изображение имеет одинаковую высоту и сохраняет свое соотношение сторон - PullRequest
Новая
       9

Центрированная сова-карусель, где каждое изображение имеет одинаковую высоту и сохраняет свое соотношение сторон

0 голосов
/ 01 июля 2018

Существует ли подход к созданию центрированного owl-carousel, где каждое изображение имеет одинаковую высоту без потери соотношения сторон?

Я пытался вычислить размеры изображения с помощью JS/jQuery, но тогда вычисление owl-carousel было ошибочным. Тот же результат с 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 элементом на экране. План состоит в том, чтобы рассчитать все видимые предметы и изменить высоту в соответствии с самым высоким элементом.

Похоже, что пока нет таких опций.

1 Ответ

0 голосов
/ 01 июля 2018

Если все ваши изображения имеют одинаковую высоту - попробуйте добавить 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>
...