Bootstrap Carousel Slider不起作用
[英]Bootstrap Carousel Slider not working
問題描述
我一直在為我的項目使用Bootstrap開發主題。 如我所見，“旋轉木馬”滑塊有問題。 我在這里已閱讀有關Carousel的問題和解答，但我的問題沒有任何進展。 當我在代碼標記之間將其粘貼到此處時，我看不到不好的代碼。
我從Bootstrap獲得了滑塊： http : //getbootstrap.com/javascript/#carousel
問題是當我單擊滑塊上的下一頁時，可以看到鏈接
http://example.com/#carousel-example-generic
<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>
之后沒有任何反應。 而且第一張幻燈片也不會移到第二張幻燈片。
1 個解決方案
解決方案1
1 2016-11-19 10:21:54
請檢查是否已加載站點中的所有依賴項：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
這是一個工作示例，將其復制
http://codepen.io/anon/pen/pNRrPm
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img alt="First slide [900x500]"
data-src="holder.js/900x500/auto/#777:#555/text:First slide"
src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
<div class="item"><img alt="Second slide [900x500]"
data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
class="right carousel-control" role="button"
data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
</div>
</body>
</html>
帶標簽的滑塊旋轉木馬不在bootstrap 4中工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.