Bootstrap Carousel直到悬停或点击为止。行为无法在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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>
答案 0 :(得分:0)
showCarousel
根据我记忆或通过搜索找不到引导程序的一部分......我在页面上看不到任何其他轮播。
我的建议:在原文中注释或删除此代码段。
//set the timer
setTimeout(function(){
showCarousel(arr, index+1);
}, 500);
当我从相关的<script>
标签之间复制代码时,减去该块,轮播开始了。
the example您支持此建议的基础是他们的代码使用$('#myCarousel').carousel();
初始化轮播的位置。
答案 1 :(得分:0)
$(".carousel-inner").append($('<div class="item active">
添加&#39;项目有效&#39;希望它能起作用