Bootstrap Carousel不會滑動直到鼠標懸停或單擊

Question

Bootstrap輪播沒有滑動直到鼠標懸停或點擊：我一直在研究這個問題已經有一段時間了，還沒有找到解決方案。 我理解這可能是一個重復的問題，但我確實需要盡快找到解決方案，迄今為止的所有建議都沒有解決問題。 可以在http://aagreen.dev.activemls.com上查看此問題的行為

我們在/ property / slideshow_json中有JSON數據，輸出如下：

[{"price": "105,000", "mls_number": "5013724", "address": "120 Merry, BOWLING GREEN 43402"}, {"price": "118,900", "mls_number": "5048488", "address": "612 Gypsy Lane, BOWLING GREEN 43402"}]

我的HTML看起來像這樣：

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

當前版本的javascript如下所示：

$(document).ready(function(){
     $.getJSON("/property/slideshow_json", function(data){
          console.log(data);
     }).success(function(data){
          console.log("success");
          $.each(data, function (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>'));
           });    
     });
     $('.carousel-indicators li:first').addClass('active');
     $('.carousel-inner div:first').addClass('active');
     $('#myCarousel').carousel({interval: 4000});
});

Answer 1

輪播無法啟動，因為您在附加數據之前調用$.carousel 。

你應該在$.getJSON成功回調中啟動它，如：

 $.getJSON("/property/slideshow_json", function(data){}).success(function(data){
      console.log("success");
      $.each(data, function (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>'));

           $('.carousel-indicators li:first').addClass('active');
           $('.carousel-inner div:first').addClass('active');
           $('#myCarousel').carousel({interval: 4000});               

      });    
 });