Javascript 活动项目应该在猫头鹰旋转木马的中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37388182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The active item should be in the middle of Owl Carousel
提问by Gabbax0r
I have a problem with my owl-carousel. Everything works fine but the active item is the first one on the page not the middle one (the colored is the active one). You can see this in the following screenshot.
我的猫头鹰旋转木马有问题。一切正常，但活动项目是页面上的第一个而不是中间项目（彩色是活动项目）。您可以在以下屏幕截图中看到这一点。
I would like to have the middle item always be the active item.
我希望中间项目始终是活动项目。
My JQuery code :
我的 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
}
}
});
I found something like this but it doesn work:
我发现了这样的东西，但它不起作用：
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
}
}
});
回答by Gleb Kemarsky
Owl Carousel adds the .activeclass to all visible items, not only to one of them.
Owl Carousel 将.active类添加到所有可见项目，而不仅仅是其中之一。
But when you use the centeroption, only the central item gets the .centerclass.
但是，当你使用该center选项，只有中央项获得.center类。
Look at this demo: https://codepen.io/glebkema/pen/Xjryjd
看这个演示：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;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css">
<div class="owl-carousel">
<div><img src="//placehold.it/300x300/936/fff/?text=1" alt=""></div>
<div><img src="//placehold.it/300x300/693/fff/?text=2" alt=""></div>
<div><img src="//placehold.it/300x300/369/fff/?text=3" alt=""></div>
<div><img src="//placehold.it/300x300/f63/fff/?text=4" alt=""></div>
</div>
<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.0.0-beta.2.4/owl.carousel.min.js"></script>PS You can simplify your code.
PS 您可以简化您的代码。
items:3,
responsive:{
0:{
items:1,
stagePadding: 450
},
600:{
items:1,
stagePadding: 450
},
1000:{
items:1,
stagePadding: 450
}
is equivalent to
相当于
items:1,
stagePadding: 450,
PPS. 450is a very huge for the stagePaddingoptionon a narrow screen.
聚苯乙烯。450对于窄屏幕上的stagePadding选项来说是一个非常大的选择。
