-2
A
回答
0
你可以把控制無論你想,這些都使他們的工作tagas。 href="#myCarousel"
點至轉盤ID和data-slide="next"
設置行爲:
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">next</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="prev">prev</a>
0
像這樣的事情可能會爲你工作:https://codepen.io/anon/pen/zNOOrQ
HTML
<div class="container">
<div class="page-header">
<h1>Bootstrap carousel with number indicator</h1>
</div>
</div>
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">Slide 1</li><br>
<li data-target="#carousel-example-generic" data-slide-to="1">Slide 2</li><br>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x500" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/1200x500" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CSS
.carousel-indicators-numbers {
li {
display: block;
position: relative;
left:140%;
bottom: 150px;
text-indent: 0;
margin: 0 2px;
width: 70px;
height: 30px;
border: none;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
&.active, &:hover {
margin: 0 2px;
width: 70px;
height: 30px;
background-color: #337ab7;
}
}
}
相關問題
- 1. 如何在導航欄上製作引導程序傳送帶指示器
- 2. 如何更改傳送帶活動指示器顏色 - 引導程序
- 3. 引導程序傳送帶不啓動
- 4. 將引導程序傳送帶指示符垂直放置在傳送帶右側的問題
- 5. 圖像不顯示在引導程序3傳送帶內
- 6. 帶引導程序v4的縮略圖傳送帶
- 7. 帶引導程序的側邊欄
- 8. 帶引導程序的邊框佈局
- 9. 帶邊欄的砌體 - 引導程序
- 10. 居中引導傳送帶
- 11. 動態引導傳送帶
- 12. 在幾頁中管理相同的引導程序傳送帶
- 13. 在Shiny應用程序中的引導傳送帶
- 14. 幻燈片之間的空白引導程序傳送帶
- 15. 多引導程序傳送帶&自定義jQuery的控件
- 16. 在頁腳上可見的引導程序傳送帶按鈕
- 17. ajax調用中的引導程序傳送帶問題
- 18. 轉換期間的引導程序傳送帶調整
- 19. 把照片旁邊導航欄引導
- 20. 窗體不能在引導程序傳送帶內編輯
- 21. 無法使用jquery「點擊」引導程序傳送帶
- 22. 文本在傳送帶(引導程序4)中響應l
- 23. 引導程序傳送帶無法正常工作
- 24. 引導程序4傳送帶不工作
- 25. 圖像在引導程序中未正確對齊傳送帶
- 26. 將圖像載入引導程序傳送帶onClick
- 27. 如何修復引導程序傳送帶'offSetWidth'錯誤
- 28. 傳送帶引導程序4不起作用
- 29. 如何重構引導程序傳送帶
- 30. 在一頁上使用兩個引導程序傳送帶