[英]Bootstrap carousel pagination with previous and next
我正在嘗試在 carousel-indicators 列表中添加 carousel Left 和 Right 控件,使其看起來像分頁,它在那里工作正常,但我面臨的問題是 carousel-indicators 列表的 INDEX。 任何人都可以幫助解決這個問題嗎? 提前致謝:)
這是演示:
https://jsfiddle.net/adampavlov/u6pbca1k/11/
.carousel-indicators li {
width: 32px !important;
height: 42px !important;
border-radius: 0;
line-height: 42px;
font-weight: 500;
text-align: center;
text-indent: inherit;
border: 1px solid transparent;
opacity: 1;
font-size: 18px;
color: #777777;
}
.carousel-indicators li.active {
color: #F85A05;
}
.carousel-indicators .prev,
.carousel-indicators .next {
opacity: 1;
width: 50px;
height: 41px;
border: 1px solid #D8D8D8;
font-size: 30px;
margin: 0 20px;
text-align: center;
}
這是因為您的箭頭被視為指示器,因為它們位於帶有 class carousel-indicators
的 div 內。 相反,他們應該住在這個 div 之外並擁有自己的類,例如carousel-control-prev
和carousel-control-next
。
左箭頭被視為分頁計數的索引 0 ,而不是數字1
。 所以 bootstrap 看到有 4 個元素被視為分頁節點[left arrow, 1, 2, 3, right arrow]
,而不僅僅是[1, 2, 3]
。
所以,這樣的事情會起作用:
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Bootstrap 文檔對此有更詳細的答案。 這是文檔的鏈接。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.