我的导航栏行为不正确。它同时在垂直行中显示 3 个滑块图像,并且不会在图片中滑动。使用的CSS是Twitter引导程序的CSS。我在那里有自己的CSS,但没有影响轮播,也没有添加javascript,只有Jquery和bootstrap.js。这是引导程序 V3。知道吗?
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-
slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-
slide-to="1"></li>
<li data-target="#carousel-example-generic" data-
slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-
example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-
example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
您的问题似乎是您为所有幻灯片指定了active
类。仅指定第一个开始。为所有这些指定active
使它们都可见,并且其选择器在幻灯片中切换(不是活动项目,在单击按钮时是上一个或下一个无法拾取其他任何内容)无法选择,因为没有任何非活动不再可用。
<div class="item active">
<img src="http:\placehold.it32x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"> <!-- removed active class from here -->
<img src="http:\placehold.it42x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"><!-- removed active class from here -->
<img src="http:\placehold.it52x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
小提琴