位置與輪播指標不一致
[英]position inconsistency with carousel indicators
問題描述
我正在使用此代碼創建一個包含4個項目的基本輪播滑塊，當我轉到下一張幻燈片時效果很好，但是當我通過輪播指示器導航到第一張幻燈片時，輪播指示器的位置變得不一致。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="imageCarousel" class="carousel slide" data-interval="2000">
<div class="carousel-indicators">
<ol>
<li data-target="#imageCarousel" data-slide-to="0" class="active" ></li>
<li data-target="#imageCarousel" data-slide-to="1" ></li>
<li data-target="#imageCarousel" data-slide-to="2" ></li>
<li data-target="#imageCarousel" data-slide-to="3" ></li>
</ol>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="Images/img1.jpg" class="img-responsive" />
<div class="carousel-caption">
<h3>Image 1</h3>
<p>This is the description for Image1</p>
</div>
</div>
<div class="item">
<img src="Images/img2.jpg" class="img-responsive" />
<div class="carousel-caption">
<h3>Image 2</h3>
<p>This is the description for Image2</p>
</div>
</div>
<div class="item">
<img src="Images/img3.jpg" class="img-responsive" />
<div class="carousel-caption">
<h3>Image 3</h3>
<p>This is the description for Image3</p>
</div>
</div>
<div class="item">
<img src="Images/img4.jpg" class="img-responsive" />
<div class="carousel-caption">
<h3>Image 4</h3>
<p>This is the description for Image4</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(imageCarousel).carousel();
});
</script>
</body>
</html>
這是頁面加載時的第一張幻燈片。 當我轉到下一張幻燈片時，效果很好。
但是，當我導航到第一張幻燈片時，我面對的旋轉木馬位置有些矛盾，這是第二張快照。
我該如何克服這個問題？
1 個解決方案
解決方案1
0 已采納 2017-04-21 22:23:24
您確定要正確初始化輪播嗎？
$(document).ready(function () {
$('#imageCarousel').carousel();
});
我發現了問題，您的標記錯誤。 ol必須具有carousel-indicators類，但是將其包裝到div 。 正確的標記是：
<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active" ></li>
<li data-target="#imageCarousel" data-slide-to="1" ></li>
<li data-target="#imageCarousel" data-slide-to="2" ></li>
<li data-target="#imageCarousel" data-slide-to="3" ></li>
</ol>
在此處查看更多詳細信息： https : //getbootstrap.com/javascript/#carousel
這是有效的jsfiddle
Bootstrap Carousel：禁用指標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.