如何定位 Owl 旋转木马，使中心的项目始终适合框架图像？

Question

如何定位框架，使中心项目始终适合框架？不管连续多少个项目。

我不确定为什么该代码段不起作用，这里还有 Codepen https://codepen.io/ivan-topi/pen/LYRKvpJ

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  autoplay: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 6
    }
  }
})

.container {
  margin: 90px auto;
  max-width: 1600px;
  position: relative;
  padding: 0 15px;
}

.frame {
  position: absolute; 
  top: -80px;
  left: 50%; 
  transform: translateX(-50%);
  width: 240px;
  opacity: .55;
  z-index: 10;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>

<div class="container">
  <img class="frame" src="https://www.pngfind.com/pngs/m/103-1034073_html-file-mobile-frame-download-free-hd-png.png"/>
  <div class="owl-carousel">
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
  </div>
</div>

Answer 1

您必须将 center: true 属性设置为 owlCarousel 对象。

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  center: true,
  autoplay: true,
  responsive: {
  0: {
    items: 1
  },
  600: {
    items: 3
  },
  1000: {
    items: 6
  }
}

})

如何定位 Owl 旋转木马，使中心的项目始终适合框架图像？

How to position Owl Carousel so that item in center always fits the framed image?

jquery

css

owl-carousel