在Owl Carousel中如何使中央图像比另一个更大？

Question

如何让Owl Carousel看起来像这样：

我试过但它不起作用。

这里的工作文件将非常感谢您的帮助。

＆＃13;

＆＃13;

$('.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
})

＆＃13;

.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;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" 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>

＆＃13;

＆＃13;

＆＃13;

enter link description here

Answer 1

修改你的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;
}

注意： 根据需要调整中心图像左侧空间