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

Question

How can I position frame so that center item always fits inside of it? No matter how many items are in a row.

I am not sure why the snippet isn't working, here is Codepen as well 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

You have to set the center: true property to owlCarousel object.

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

})