Javascript 在 OWL Carousel 当前项目上添加类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33962469/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 15:43:34 来源:igfitidea点击:
Add class on OWL Carousel current item
提问by Aariba
I'm using OWL Carousel, trying to add class to current item <div class="item">when every time slide.
我正在使用 OWL Carousel，<div class="item">每次滑动时都尝试将类添加到当前项目。
JS:
JS：
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true
});
});
HTML:
HTML：
<div id="owl-demo" class="owl-carousel">
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
</div>
Tried (not working):
尝试过（不工作）：
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true,
afterAction: function(elem){
$(elem).addClass("curent");
}
});
});
How to add class Current item when every time slide?
每次滑动时如何添加类当前项目？
回答by Elow
You can try:
你可以试试：
$(document).ready(function () {
var carousel = $("#owl-demo");
carousel.owlCarousel({
items : 4,
lazyLoad : true,
navigation : true,
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')
}
});
});
