引导轮播直到悬停或点击才开始答案

【问题标题】：Bootstrap Carousel Not Starting Until Hovered Over Or Clicked引导轮播直到悬停或点击才开始
【发布时间】：2013-11-25 06:54:02
【问题描述】：

引导轮播直到悬停或点击后才会启动。行为无法在http://aagreen.dev.activemls.com查看

这是我的代码：

<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>
    $(document).ready(function() {
        $.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);
        }
        $('#myCarousel').carousel({interval: 4000});
    });
</script>

新代码：我试图简化我的代码，但仍然出现这种奇怪的行为，这似乎是 URL 特定的意思，例如，sandbox.dev.activemls.com 轮播加载正常，而在 aagreen.dev.activemls.com 轮播表现为描述即：在悬停或单击之前不会激活。这是我的新脚本：

<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", function(data){
                            $.each(data, function (index, value) {
                                console.log(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>'));
                            });
                        });
                        $('#myCarousel').carousel({interval: 4000});
                    </script>

【问题讨论】：

标签： jquery json twitter-bootstrap

【解决方案1】：

showCarousel 不是引导程序的一部分，据我记忆或可以通过搜索找到...而且我在页面上看不到任何其他轮播。

我的建议：注释掉或删除你原来的这个sn-p。

//set the timer
setTimeout(function(){
    showCarousel(arr, index+1);
}, 500);

当我从相关的 <script> 标记之间复制您的代码时，减去该块，轮播开始了。

the example 也支持此建议，您基于他们的代码使用$('#myCarousel').carousel(); 初始化轮播的位置。

【讨论】：

仍然是同样的问题与被阻止。 showCarousel 是 JSON 中的数组，然后在 setTimeout 函数中用作计数器。
对不起，这并不能解决问题...请参阅上面的编辑
这解释了当我查看该网站时，图像数组曾一度增长到超过 500 张。当我在另一个页面上时，您的图像加载器 (showCarousel?) 一定在运行。如果您使用“幻灯片”事件将照片添加到轮播末尾会怎样？有一个post here 讨论了它，它可以将所有与幻灯片相关的代码集中到一个区域，在轮播<script> 块内。您也可以剪掉旧幻灯片，以减小页面大小。

【解决方案2】：

$(".carousel-inner").append($('<div class="item active">

添加 'item active' 希望它会起作用

【讨论】：