gpt4 book ai didi

owl-carousel - Owl Carousel 2 : current item when page loads

转载 作者:行者123 更新时间:2023-12-04 16:01:05 29 4
gpt4 key购买 nike

我需要在加载页面时将类更改为当前项目。我在当前项目中显示标题。这是代码:

$(document).ready(function() {

$('#slider').on('change.owl.carousel changed.owl.carousel', function(e) {
if (e.property.name != 'position') return;

var current = e.relatedTarget.current()
var items = $(this).find('.owl-stage').children()
var add = e.type == 'changed'

items.eq(e.relatedTarget.normalize(current )).toggleClass('current', add)
});

$('#slider').owlCarousel({

items : 2,
nav: true,
loop: true,
});
})

这是一个工作示例:http://jsfiddle.net/kurtko/1qdurrLz/16/

此代码在轮播更改时工作正常,但在加载页面时失败,因为 e.relatedTarget.current() 为 null

有什么想法吗?

谢谢。

最佳答案

为此,您必须使用 initialized 事件:

$(document).ready(function() {
$('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return

var current = e.relatedTarget.current()
var items = $(this).find('.owl-stage').children()
var add = e.type == 'changed' || e.type == 'initialized'

items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add)
}).owlCarousel({
items : 2,
nav: true,
loop: true,
});
});

参见 http://jsfiddle.net/1qdurrLz/18/ .

关于owl-carousel - Owl Carousel 2 : current item when page loads,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25769366/

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