0

ブートストラップ カルーセルがホバーするかクリックするまで開始しない。http://aagreen.dev.activemls.comで動作を確認できません

これが私のコードです：

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators"></ol>

    <!-- Carousel items -->
    <div class="carousel-inner"></div>

    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<script>
    $(document).ready(function() {
        $.getJSON("/property/slideshow_json").done(function(data){
            //data is the array you expected.
            showCarousel(data, 0);
        })

        function showCarousel(arr, index){
            if(index >= arr.length) index = 0;
            var item = arr[index];
            //update the dom using the data item.mls_number, item.address, item.price
            //$(".carousel-indicators").append($('<li data-target="#myCarousel" data-slide-to="' +index+ '"</li>'));
            $(".carousel-inner").append($('<div class="item"><img src="/property/photo/'+item.mls_number+'/1"><div class="carousel-caption"><h4>PRICED TO SELL | $'+item.price+'</h4><p style="text-transform:uppercase;">'+item.address+' <a href="/property/detail/'+item.mls_number+'"class="btn btn-small btn-info pull-right">View Details</a></p></div></div>'));

            //set the timer
            setTimeout(function(){
                showCarousel(arr, index+1);
            }, 500);
        }
        $('#myCarousel').carousel({interval: 4000});
    });
</script>

新しいコード: コードを単純化しようとしましたが、それでもこの奇妙な動作が発生します。たとえば、sandbox.dev.activemls.com ではカルーセルが正常に読み込まれ、aagreen.dev.activemls.com ではカルーセルは説明どおりに動作します。つまり、ホバーするかクリックするまでアクティブになりません。ここに私の新しいスクリプトがあります：

<div id="myCarousel" class="carousel slide">
                      <ol class="carousel-indicators">
                      </ol>

                      <!-- Carousel items -->
                      <div class="carousel-inner">
                      </div>

                      <!-- Carousel nav -->
                      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                    <script>
                        $.getJSON("/property/slideshow_json", function(data){
                            $.each(data, function (index, value) {
                                console.log(index, value);
                                $(".carousel-indicators").append($( '<li data-target="#myCarousel" data-slide-to="' +index+ '"</li>' ));
                                $(".carousel-inner").append($('<div class="item"><img src="/property/photo/'+value.mls_number+'/1"><div class="carousel-caption"><h4>PRICED TO SELL | $'+value.price+'</h4><p style="text-transform:uppercase;">'+value.address+' <a href="/property/detail/'+value.mls_number+'"class="btn btn-small btn-info pull-right">View Details</a></p></div></div>'));
                            });
                        });
                        $('#myCarousel').carousel({interval: 4000});
                    </script>
4

2 に答える 2

0

showCarousel私が覚えている限り、または検索で見つけることができる限り、ブートストラップの一部ではありません...そして、ページに他のカルーセルは表示されません。

私の提案: オリジナルのこのスニペットをコメントアウトするか削除してください。

//set the timer
setTimeout(function(){
    showCarousel(arr, index+1);
}, 500);

関連するタグの間からコードをコピーすると<script>、そのブロックを除いて、カルーセルが開始されました。

このアドバイスは、コードがでカルーセルを初期化する場所に基づいて、これに基づいた例でもサポートされています$('#myCarousel').carousel();。

于 2013-11-12T23:16:30.037 に答える
0 
$(".carousel-inner").append($('<div class="item active">

「アクティブなアイテム」を追加してください

于 2014-07-03T16:11:12.657 に答える