活动项目应位于 Owl Carousel 的中间答案

【问题标题】：The active item should be in the middle of Owl Carousel活动项目应位于 Owl Carousel 的中间
【发布时间】：2016-05-23 10:10:19
【问题描述】：

我的猫头鹰旋转木马有问题。一切正常，但活动项目是页面上的第一个而不是中间项目（彩色是活动项目）。您可以在以下屏幕截图中看到这一点。

我希望中间项始终是活动项。

我的 JQuery 代码：

jQuery(".owl-carousel").owlCarousel({
    items:3,      
    loop:true,
    nav:true,
    responsive:{
        0:{
            items:1,
            stagePadding: 450
        },
        600:{
            items:1,
            stagePadding: 450
        },
        1000:{
            items:1,
            stagePadding: 450
        }
    }
});

我发现了类似的东西，但它不起作用：

jQuery(".owl-carousel").owlCarousel({
    items:3,      
    loop:true,
    nav:true,

// THIS IS THE NEW PART
    afterAction: function(el){
        //remove class active
        this
        .$owlItems
        .removeClass('active')
        //add class active
        this
        .$owlItems //owl internal $ object containing items
        .eq(this.currentItem + 1)
        .addClass('active')
        }
// END NEW PART

    responsive:{
        0:{
            items:1,
            stagePadding: 450
        },
        600:{
            items:1,
            stagePadding: 450
        },
        1000:{
            items:1,
            stagePadding: 450
        }
    }
});

【问题讨论】：

@oboshto 是的，我试过了，但活动项目仍然是左边的。

标签： javascript jquery css owl-carousel

【解决方案1】：

Owl Carousel 将 .active 类添加到所有可见项目，而不仅仅是其中一个。

但是当你使用the center option 时，只有中心项获得.center 类。

看这个演示：https://codepen.io/glebkema/pen/Xjryjd

$('.owl-carousel').owlCarousel({
  autoplay: true,
  center: true,
  loop: true,
  nav: true,
});

.owl-item.active > div:after {
  content: 'active';
}
.owl-item.center > div:after {
  content: 'center';
}
.owl-item.active.center > div:after {
  content: 'active center';
}
.owl-item > div:after {
  font-family: sans-serif;
  font-size: 24px;
  font-weight: bold;
}

<div class="owl-carousel  owl-theme">
  <div><img src="https://via.placeholder.com/300x200/936/fff/?text=1" alt=""></div>
  <div><img src="https://via.placeholder.com/300x200/693/fff/?text=2" alt=""></div>
  <div><img src="https://via.placeholder.com/300x200/369/fff/?text=3" alt=""></div>
  <div><img src="https://via.placeholder.com/300x200/f63/fff/?text=4" alt=""></div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">

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

PS 你可以简化你的代码。

items:3,
responsive:{
    0:{
        items:1,
        stagePadding: 450
    },
    600:{
        items:1,
        stagePadding: 450
    },
    1000:{
        items:1,
        stagePadding: 450
    }

等价于

items:1,
stagePadding: 450,

PPS。 450 在窄屏上对于the stagePadding option 来说是非常巨大的。

【讨论】：

如何为点击功能添加相同的概念。如果我点击内容成为中心的内容。
@Crock 我猜你需要to use events 而不是类。类似$( CONTENT ).click(function() { owl.trigger('to.owl.carousel', POSITION ); })
var sync2 = $(".owl-carousel").owlCarousel({ margin:10, dots:false, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } });
这是我的猫头鹰旋转木马。我怎样才能使 item5 中的点击内容 div 居中
@Crock 这是一个新问题。我认为您需要提出新问题。