Twitter bootstrap 3 为什么我的引导3转盘不能正常滑动?
我使用Twitter Bootstrap 3创建了一个旋转木马,但我无法让它正常工作。幻灯片似乎相互重叠,并不是循环播放。已检查编码错误,但未发现任何错误。下面是一个包含我的代码的JSFIDLE:() 或在此:Twitter bootstrap 3 为什么我的引导3转盘不能正常滑动?,twitter-bootstrap-3,carousel,Twitter Bootstrap 3,Carousel,我使用Twitter Bootstrap 3创建了一个旋转木马,但我无法让它正常工作。幻灯片似乎相互重叠,并不是循环播放。已检查编码错误,但未发现任何错误。下面是一个包含我的代码的JSFIDLE:() 或在此: <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarouse
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src= "js/jquery-2.0.2.js"></script>
<script src= "js/bootstrap.js"></script>
</body>
标题文本
描述
标题文本
描述
标题文本
描述
以下是完整的代码。。在您编写为“项目活动”的“内部旋转木马”中,它应该是“项目活动”的。这两个类都是独立的类
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> // error was occurring here it should item active not item-active
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
//此处发生错误,它应该是活动项而不是活动项
标题文本
描述
标题文本
描述
标题文本
描述
可能不是答案,但是
应该是
(在item和active之间有一个空格,而不是连字符)。@OllyHodgson这才是答案。删除连字符解决了这个问题!