[英]bootstrap thumbnails not working
我正在嘗試為縮略圖創建輪播。 輪播已完成，但無法運行。 就像我無法單擊“下一個”和“上一個”按鈕一樣，這些按鈕分別顯示在轉盤的兩側。 請幫幫我。 以下是我的代碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="well">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
<div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/lightbox.min.js"></script>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/carousel.js"></script>
</body>
</html>
您的代碼工作正常，我相信您的問題來自js文件。 您正在復制JQuery。 檢查您的控制台，您可能有錯誤：
未捕獲的錯誤：Bootstrap的JavaScript需要jQuery
您應按以下順序包括文件：
您的Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/lightbox.min.js"></script> <script src="/js/carousel.js"></script> 編輯：他在評論中提到資源無法加載。 得到錯誤：
不允許加載資源....
這是鉻的問題。 有人在這里有同樣的問題。
帶有縮略圖的 Bootstrap 輪播 foreach 在更改后不起作用
[英]Bootstrap carousel with thumbnails foreach not working after Change
帶有圖像指示器的Bootstrap輪播，就像縮略圖不工作一樣
[英]Bootstrap carousel with images indicators, like thumbnails not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.