1

次のコードのように、クリックイベント内でフクロウカルーセルを初期化する必要があります。最初にクリックすると機能しますが、(イベント div で) もう一度クリックすると機能しません。どうすればそれを達成できますか? フクロウのカルーセルをリセットする方法はありますか?

この投稿の最後の部分に完全なコードを追加して、pb をよりよく理解し、テストしました。

これについて私を助けてもらえますか？私は本当にこれが必要です。

前もって感謝します、

CAFC

ソース フクロウ カルーセル: 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>
4

1 に答える 1

0

どうぞ:

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/

于 2014-08-06T22:22:07.803 に答える