1

I have a bootstrap carousel that is pulling its data from JSON. Our concern is how slow it is loading, and it appears to not start automatically. Here is the code.....

<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").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);
    }
    $('.carousel').carousel({interval: 2500})
</script>
4

1 回答 1

3

其中一项应在 html 中设置为活动。

于 2014-01-07T15:47:18.773 回答