Question

我需要在点击事件中初始化猫头鹰轮播，如下面的代码，它在我点击时第一次工作，但是当我再次点击它时（在事件div上）它根本不起作用。我怎么能做到这一点？有没有办法重置猫头鹰旋转木马？

我将完整的代码添加到本文的最后部分，以便更好地了解我的pb并对其进行测试。

你可以帮我解决这个问题吗？我真的需要这个。

提前感谢，

CAFC

source owl carousel：http://owlgraphic.com/owlcarousel/demos/customJson.html

$('#XX').click(function(e) {

    e.PreventDefault;

    $("#owl-demo").owlCarousel({
        jsonPath: 'json/customData2.json',
        jsonSuccess: customDataSuccess
    });

    function customDataSuccess(data) {

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

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

            content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
        }

        $("#owl-demo").html(content);
    }

});

我的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Owl Carousel - Dynamic content via JSON</title>

    <!-- Owl Carousel Assets -->
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">


    <script src="../assets/js/jquery-1.9.1.min.js"></script>
    <script src="../owl-carousel/owl.carousel.js"></script>


    <!-- Demo -->

    <style>
        #owl-demo .item {
            background: #a1def8;
            padding: 10px 0px;
            display: block;
            margin: 5px;
            color: #FFF;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            text-align: center;
        }
    </style>


    <script>
        $(document).ready(function() {



            $('#XX').click(function(e) {


                $("#owl-demo").owlCarousel({
                    jsonPath: 'json/customData2.json',
                    jsonSuccess: customDataSuccess
                });

                function customDataSuccess(data) {



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

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

                        content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
                    }

                    $("#owl-demo").html(content);
                }



            });




        });
    </script>




</head>

<body>


    <div id="owl-demo"></div>

    <div id='XX'>Click HERE!</div>

</body>

</html>

Answer 1

这里你去：

JS：

$(document).ready(function () {
    var owl = false;
    $('#XX').click(function (e) {
        if (owl) {
            $("#owl-demo").data('owlCarousel').reinit({
                jsonPath: '/echo/json',
                jsonSuccess: customDataSuccess
            });
        } else {
            owl = true;
        }
        $("#owl-demo").owlCarousel({
            jsonPath: '/echo/json',
            jsonSuccess: customDataSuccess
        });

        function customDataSuccess(data) {
            console.log('loading Data');

            data = testJSON;

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

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

                content += "<img src=\"" + img + "\" alt=\"" + alt + "\">";
            }

            $("#owl-demo").html(content);
        }
    });
});

reinit的方法位于5. Owl Data methods

下的文档底部

演示：http://jsfiddle.net/robschmuecker/pLvdx8xx/

owl carousel插件在事件点击中不起作用

1 个答案: