javascript - Ajax 不与 owl-carousel 一起使用

Question

我在我的页面中实现 ajax 时遇到问题，其中的代码是 owl-carousel:

Controller :

 public int Getmembers()
    {

        return db.Teams.Count();

        }
    }

View :

<script>
$(document).ready(function () {
                        var json = null;
                        $.ajax({
                            url: '@Url.Action("Getmembers", "Home")',
                            type: "GET",
                            dataType: "int",
                            success: function (data) {
                                json = data;

                            },
                            error: function () {
                                alert("Erreur de récupération des membres ou il n'existe aucun memnbre");
                            }

                        })
                        alert(json);
                        var owl = $("#owl-demo");

                        owl.owlCarousel({
                            items: json, //10 items above 1000px browser width
                            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
                            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
                            itemsTablet: [600, 2], //2 items between 600 and 0
                            itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
                            pagination: false

                        });


                    });
</script>

我尝试调试，发现在 $.ajax 中传递了 json 的值(int 13)，但是当我使用警报时，我得到 null ，我在文档中搜索得到了这个 http://www.jq22.com/demo/OwlCarousel2/demos/ajax.html但仍然没有任何线索。

Answer 1

您的 ajax 调用是异步的，这意味着它将在 owl carousel 初始化后执行 success 方法。

将轮播的 init 方法放入 success 方法中:

    $(document).ready(function () {
    var json = null;
    $.ajax({
        url: '@Url.Action("Getmembers", "Home")',
        type: "GET",
        dataType: "int",
        success: function (data) {
            var owl = $("#owl-demo");

            owl.owlCarousel({
                items: data, //10 items above 1000px browser width
                itemsDesktop: [1000, 5], //5 items between 1000px and 901px
                itemsDesktopSmall: [900, 3], // betweem 900px and 601px
                itemsTablet: [600, 2], //2 items between 600 and 0
                itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
                pagination: false

            });

        },
        error: function () {
            alert("Erreur de récupération des membres ou il n'existe aucun memnbre");
        }

    });
});