Question

我目前正在尝试使用owlCarousel创建设计（请参见下图），并且正在努力寻求解决方案

我目前正在添加一些CSS类来标识不同的CSS类，然后使用transform调整大小：scale（）;但是它只是无法解决我的需求。

<div class="owl-carousel owl-theme" id="video-carousel-01">
  <div class="item">
    <button onclick="modal('video-01'); return false">
     <div class="embed-container">
       <img src="../placeholder.jpg">
     </div>
   </button>
 </div>
<div class="item">
    <button onclick="modal('video-01'); return false">
     <div class="embed-container">
       <img src="../placeholder.jpg">
     </div>
   </button>
 </div>
<div class="item">
    <button onclick="modal('video-01'); return false">
     <div class="embed-container">
       <img src="../placeholder.jpg">
     </div>
   </button>
 </div>
<div class="item">
    <button href="#" onclick="modal('video-01'); return false">
     <div class="embed-container">
       <img src="../placeholder.jpg">
     </div>
   </button>
 </div>
<div class="item">
    <button href="#" onclick="modal('video-01'); return false">
     <div class="embed-container">
       <img src="../placeholder.jpg">
     </div>
   </button>
 </div>

JavaScript

<script>
  $(function(){
    $('#video-carousel-01').on('initialized.owl.carousel translate.owl.carousel', function(e){
      idx = e.item.index;
      $('.owl-item.big').removeClass('big');
      $('.owl-item.medium').removeClass('medium');
      $('.owl-item').eq(idx).addClass('big');
      $('.owl-item').eq(idx+1).addClass('medium');
      $('.owl-item').eq(idx-1).addClass('medium');
    });
    $('#video-carousel-01').owlCarousel({
      center: true,
      items: 5,
      loop:true,
      autoplay: true,
      autoPlay: 3000,
      nav: false,
      animateOut: 'fadeOut',
      autoWidth: true
    })
  }); 
</script>

CSS

.owl-carousel .owl-item.big {
  z-index: 100;
  transform: scale(1, 1);
  width: 40%;
  transition: all 0.5s ease;
}
.owl-carousel .owl-item.medium,
.owl-carousel .owl-item.center ~ .owl-carousel .owl-item  {
  z-index: 90;
  transform: scale(0.8, 0.8);
  transition: all 0.5s ease;
  width: 12.5%px;
}
.owl-carousel .owl-item {
  z-index: 80;
  transform: scale(0.6, 0.6);
  transition: all 0.5s ease;
}

Im遇到的主要问题是它要么显示3的autoWidth，要么显示它们偏离中心的位置。

我对owlCarousel的使用不熟悉，通常会使用slick，但尽管我应该尝试一下，但任何帮助将不胜感激。

猫头鹰轮播设计

0 个答案: