gpt4 book ai didi

jquery - Owl Carousel 2 可见项中的第一项和最后一项如何添加类?

转载 作者:行者123 更新时间:2023-11-28 04:47:55 25 4
gpt4 key购买 nike

我需要为 Owl Carousel 2 上当前可见元素的第一个和最后一个元素添加一个类。

最佳答案

演示:

http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p=preview

Owl carousel 为所有可见元素添加一个类 active。正如您所看到的,我在下面编写了一个脚本来遍历所有具有事件类的猫头鹰元素,然后使用第 0 个和最后一个索引,我添加了两个不同的类。

在您的元素中使用代码,您将获得添加的类。

jQuery(document).ready(function($) {

var carousel = $(".latest-work-carousel");
carousel.owlCarousel({
loop : true,
items : 3,
margin:0,
nav : true,
dots : false,
});

checkClasses();
carousel.on('translated.owl.carousel', function(event) {
checkClasses();
});

function checkClasses(){
var total = $('.latest-work-carousel .owl-stage .owl-item.active').length;

$('.latest-work-carousel .owl-stage .owl-item').removeClass('firstActiveItem lastActiveItem');

$('.latest-work-carousel .owl-stage .owl-item.active').each(function(index){
if (index === 0) {
// this is the first one
$(this).addClass('firstActiveItem');
}
if (index === total - 1 && total>1) {
// this is the last one
$(this).addClass('lastActiveItem');
}
});
}


});

演示:

http://plnkr.co/edit/t9URfKq9Mwh9jO705h7u?p=preview

关于jquery - Owl Carousel 2 可见项中的第一项和最后一项如何添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40105651/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com