Question

我有一个从JSON中提取数据的bootstrap轮播。我们担心的是加载速度有多慢，而且它似乎无法自动启动。这是代码.....

<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>

Answer 1

其中一个项目应该在html中设置为活动状态。

来自JSON的Bootstrap Carousel加载缓慢

1 个答案: