如何讓貓頭鷹轉盤看起來像這樣:

我試過了，但是不起作用。

這里是工作文件，將非常感謝幫助。

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  center: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  items:5
})

.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}
.owl-carousel .item {
  position: relative; /* fix blank or flashing items on carousel */
  z-index: 100; /* fix blank or flashing items on carousel */
  -webkit-backface-visibility: hidden; /* fix blank or flashing items on carousel */
}
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}
.owl-nav i {
  font-size: 52px;
}
.owl-nav .owl-prev {
  left: -30px;
}
.owl-nav .owl-next {
  right: -30px;
}


.owl-item {
	width: 100px!important;
}	
.owl-item.center {
	width: 150px!important;
}

<link  rel="stylesheet"/>
<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="carousel-wrap">
  <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 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>

修改您的JS:

$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    center: true,
    navText: [
      "<i class='fa fa-caret-left'></i>",
      "<i class='fa fa-caret-right'></i>"
    ],
    autoplay: true,
    autoWidth:true,
    autoplayHoverPause: true,
    items:5
});

添加此CSS:

.owl-carousel .owl-stage-outer { padding: 5% 0; }

.owl-item img {
  transition: 0.45s;
}

.owl-item.center img {transform: scale(1.2); }

刪除此CSS:

.owl-item.center {
    width: 150px!important;
}

注意:根據需要調整中間圖像的左右間距