Карусель для бутстрапа не раздвигается до мыши или нажмите

Question

Карусель для бутстрапа не раздвигается до тех пор, пока мышь или клик: Я уже некоторое время работал над этой проблемой и еще не нашел решение. Я понимаю, что это потенциально дублированный вопрос, но мне действительно нужно найти решение для этого как можно скорее, и все предложения на сегодняшний день не решили проблему. Поведение этой проблемы можно посмотреть на http://aagreen.dev.activemls.com

У нас есть данные JSON в/свойства/slideshow_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

Каро usel не запускается, поскольку вы вызываете $.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});    

     });  
});