[英]Add class on OWL Carousel current item
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? 每次滑动时如何添加班级当前项目?
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')
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.