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});               

      });    
 });

Bootstrap Carousel不会滑动直到鼠标悬停或单击

1 个答案: