猫头鹰轮播：无法读取未定义的属性“visibleItems”

Question

我不确定这是否是个问题，但我在控制台中收到此错误，这让我发疯，因为我更喜欢在我的页面上出现错误。

未捕获的类型错误：无法读取未定义的属性“visibleItems”。 它指向这行代码： var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

我创建了一个 JSFiddle 来复制它：http://jsfiddle.net/j2esf0bn/3/

<div id="main_image">
    <div id="sync1" class="owl-carousel owl-theme"></div>
</div>
<div id="product_thumbnails">
    <div id="sync2" class="owl-carousel owl-theme"></div>
</div>
<script>
jQuery(document).ready(function () {

    var sync1 = jQuery("#sync1");
    var sync2 = jQuery("#sync2");

    sync1.owlCarousel({
        jsonPath: 'https://dl.dropboxusercontent.com/u/71195383/customData.json',
        jsonSuccess: customDataSuccess1,
        singleItem: true,
        slideSpeed: 1000,
        pagination: true,
        navigation: true,
        navigationText: ["<i class='fa fa-chevron-left fa-2x'></i>", "<i class='fa fa-chevron-right fa-2x'></i>"],
        afterAction: syncPosition,
        responsiveRefreshRate: 200,
        rewindNav: false,
        lazyLoad: true
    });

    sync2.owlCarousel({
        jsonPath: 'https://dl.dropboxusercontent.com/u/71195383/customData.json',
        jsonSuccess: customDataSuccess2,
        items: 5,
        itemsDesktop: [1199, 5],
        itemsDesktopSmall: [979, 5],
        itemsTablet: [768, 5],
        itemsMobile: [479, 4],
        navigation: true,
        navigationText: ["<i class='fa fa-chevron-left fa-2x'></i>", "<i class='fa fa-chevron-right fa-2x'></i>"],
        pagination: false,
        rewindNav: false,
        slideSpeed: 1000,
        responsiveRefreshRate: 100,
        afterInit: function (el) {
            el.find(".owl-item").eq(0).addClass("synced");
        }

    });

    function syncPosition(el) {
        var current = this.currentItem;
        jQuery("#sync2")
            .find(".owl-item")
            .removeClass("synced")
            .eq(current)
            .addClass("synced");
        if (jQuery("#sync2").data("owlCarousel") !== undefined) {
            center(current);
        }

    }

    jQuery("#sync2").on("click", ".owl-item", function (e) {
        e.preventDefault();
        var number = jQuery(this).data("owlItem");
        sync1.trigger("owl.goTo", number);
    });

    function center(number) {
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

        var num = number;
        var found = false;
        for (var i in sync2visible) {
            if (num === sync2visible[i]) {
                var found = true;
            }
        }

        if (found === false) {
            if (num > sync2visible[sync2visible.length - 1]) {
                sync2.trigger("owl.goTo", num - sync2visible.length + 2);
            } else {
                if (num - 1 === -1) {
                    num = 0;
                }
                sync2.trigger("owl.goTo", num);
            }
        } else if (num === sync2visible[sync2visible.length - 1]) {
            sync2.trigger("owl.goTo", sync2visible[1]);
        } else if (num === sync2visible[0]) {
            sync2.trigger("owl.goTo", num - 1);
        }
    }


    function customDataSuccess1(data) {
        var content = "";
        for (var i in data["items"]) {

            var img = data["items"][i].img;
            var alt = data["items"][i].alt;

            content += "<img class=\"lazyOwl\"  data-src=\"http://owlgraphic.com/owlcarousel/demos/" + img + "\" alt=\"" + alt + "\">";
        }
        jQuery("#sync1").html(content);
    }

    function customDataSuccess2(data) {
        var content = "";

        for (var i in data["items"]) {

            var img = data["items"][i].img;
            var alt = data["items"][i].alt;

            if (data["thumbnails"] === true) {
                img = img.replace(".jpg", '-th.jpg');
            }

            content += "<img src=\"http://owlgraphic.com/owlcarousel/demos/" + img + "\" alt=\"" + alt + "\">";
        }
        jQuery("#sync2").html(content);
    }


});
</script>

我不确定如何解释或修复此错误。我已经搜索了网络，但找不到任何可以回答我的问题的内容。

任何帮助表示赞赏！

编辑

所有尝试解决此错误的尝试都导致了其他错误。

该错误仅在页面加载时在控制台中出现一次。页面加载后，轮播按预期运行。

因此，总而言之，我不会让这个错误进一步让我感到不安，并且在查看此特定页面上的控制台日志时尝试忽略它。 不过，如果有人找到解决此错误的方法，请不要犹豫，发布您的答案。

该错误似乎与使用 JSON 和同步轮播有关。

Answer 1

在您调用 owl carousel 上的 data 属性之前，元素似乎没有及时呈现。我也改变了可见物品的收集方式。

var sync2visible = sync2.data().owlCarousel.owl.visibleItems;

看看这个小提琴，它对你有用吗？

http://jsfiddle.net/j2esf0bn/5/

Answer 2

AFAIK，轮播不会立即需要此信息。我用一个简单的 if 语句修复了控制台错误，并将行从

var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

到

var sync2visible = false;
if (typeof sync2.data("owlCarousel").owl != 'undefined')
   sync2visible = sync2.data("owlCarousel").owl.visibleItems;