为什么轮播图片不会自动变化?
Why carousel picture does not change automatically?
我正在尝试更改轮播图片,但无法解决此问题。我已经看过几个示例,但我发现我的代码没有错误。我想知道你们中的一些人是否发现了其中的错误。谢谢
<!--Imagenes interactivas-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/images/menu1.jpg" alt="Hamburguesa">
</div>
<div class="item">
<img src="assets/images/menu2.jpg" alt="Frutas">
</div>
<div class="item">
<img src="assets/images/menu3.jpg" alt="Pasta">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Termino Imagenes interactivas -->
我试过你的代码工作正常,只是验证 jquery-1.12.min.js
是否正确加载。因为为了获得您期望的行为,您需要 jquery.min.js
和 bootstrap.min.js
在 浏览器运行时
上交付
或在下面添加脚本:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
我正在尝试更改轮播图片,但无法解决此问题。我已经看过几个示例,但我发现我的代码没有错误。我想知道你们中的一些人是否发现了其中的错误。谢谢
<!--Imagenes interactivas-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/images/menu1.jpg" alt="Hamburguesa">
</div>
<div class="item">
<img src="assets/images/menu2.jpg" alt="Frutas">
</div>
<div class="item">
<img src="assets/images/menu3.jpg" alt="Pasta">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Termino Imagenes interactivas -->
我试过你的代码工作正常,只是验证 jquery-1.12.min.js
是否正确加载。因为为了获得您期望的行为,您需要 jquery.min.js
和 bootstrap.min.js
在 浏览器运行时
或在下面添加脚本:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>