所以我试图让这个旋转木马在我的标题中运行,但目前它根本不想工作。我无法点击它,也不会自动浏览幻灯片。标签在点击后甚至不会响应。
HTML:
<header>
<div id="home-carousel" class="carousel slide header-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#home-carousel" data-slide-to="0" class="active"></li>
<li data-target="#home-carousel" data-slide-to="1"></li>
<li data-target="#home-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" >
<div class="item active">
<img src="images/IMG_8821_ext_opt.jpg" alt="slider-image-1">
</div>
<div class="item">
<img src="images/2V1C8599.jpg" alt="slider-image-2">
</div>
<div class="item">
<img src="images/IMG_4519_.jpg" alt="slider-image-3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#home-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#home-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
CSS:
header { height: 80vh }
.carousel { height: 80vh; z-index: -1; }
.header-carousel .carousel-indicators { bottom: 25px; }
我有什么遗失的吗?
答案 0 :(得分:1)
答案 1 :(得分:0)
这是一些简单的javascript(jQuery)代码,可以帮助你:
cnt=0;
setInterval(function(){
$('.item').removeClass('active');
$('.item').eq(cnt).addClass('active');
cnt++;
if (cnt>2) cnt=0;
},1500);