owl-carousel - OWL轮播2:页面加载时的当前项目

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

$(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轮播2:页面加载时的当前项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25769366/