為什么80%的碼農都做不了架構師？>>> ??

示例

<div?id="carousel-example-generic"?class="carousel?slide"?data-ride="carousel"><ol?class="carousel-indicators"><li?data-target="#carousel-example-generic"?data-slide-to="0"></li><li?data-target="#carousel-example-generic"?data-slide-to="1"></li><li?data-target="#carousel-example-generic"?data-slide-to="2"></li><li?data-target="#carousel-example-generic"?data-slide-to="3"></li></ol><div?class="carousel-inner"?role="listbox"><div?class="carousel-item?active"><img?data-src="holder.js/600x300?theme=sky"?alt="First?slide"></div><div?class="carousel-item"><img?data-src="holder.js/600x300?bg=#666"?alt="Second?slide"></div><div?class="carousel-item"><img?data-src="holder.js/600x300?bg=#999"?alt="Third?slide"></div><div?class="carousel-item"><img?data-src="holder.js/600x300bg=#333"?alt="4?slide"></div></div><a?class="left?carousel-control"?href="#carousel-example-generic"?role="button"?data-slide="prev"><span?class="icon-prev"?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="icon-next"?aria-hidden="true"></span><span?class="sr-only">Next</span></a> </div>

偽代碼一下，看看結構。

《div id="carousel-example-generic" class="carousel slide" data-ride="carousel"》
--| 《ol class="carousel-indicators"》? 這里是中下處的小圓點。點擊可以切換
--| --| 《li data-target="#carousel-example-generic" data-slide-to="0"》? 這里是每個小點的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="1"》? 這里是每個小點的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="2"》? 這里是每個小點的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="3"》? 這里是每個小點的指向。
--| 《div class="carousel-inner" role="listbox"》? 這里是圖片盒子，listbox
--| --|《div class="carousel-item active"》? 注意這里是激活狀態。
--| --| --| 《img》? 這里是圖片0
--| --|《div class="carousel-item"》? 這里是存放圖片的div
--| --| --| 《img》? 這里是圖片1
--| --|《div class="carousel-item"》? 這里是存放圖片的div
--| --| --| 《img》? 這里是圖片2
--| --|《div class="carousel-item"》? 這里是存放圖片的div
--| --| --| 《img》? 這里是圖片3
--| 《a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"》這里是prev按鈕。
--| --| 《span class="icon-prev" aria-hidden="true"》 這里加載圖片-箭頭左
--| --| 《span class="sr-only"》 這里是輔助設備使用說明。我很喜歡這個。
--| 《a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"》這里是prev按鈕。
--| --| 《span class="icon-next" aria-hidden="true"》 這里加載圖片-箭頭左
--| --| 《span class="sr-only"》 這里是輔助設備使用說明。我很喜歡這個。

PS：如果使用圖片處沒有寫 .active類。則輪播框不會出現。

PS：出存在兩個 .active類。那如下圖所示，控件按鈕將會發生混亂。

第一個可以控制，第二個只能自己輪播。

過渡動畫在IE 9中不受支持。

需要初始化活躍的元素。需要給其中滑塊中的一個添加.active類。否則，輪播將不可見。

PS：這個功能有一個bug，就是當第一頁是時，中下部的翻頁圓點不高亮。對于處女座的我感覺有點撓心。

可用的選項

在任何的.carousel-item元素上都可以輕松的通過使用.carousel-caption來給你的幻燈片加上說明文字。在那里面加上任何可選的 HTML，都將自動對齊和格式化。

<div?class="carousel-item?active"><img?data-src="holder.js/600x300?theme=sky"?alt="First?slide"><div?class="carousel-caption"><h4>標題~</h4><p>內容！！！<br>1</p><p>內容！！！<br>1</p></div> </div>

偽代碼：其實看一下，就是在. carousel-item中加入了一個<div class=carousel-caption>使這個div浮在窗體上方。

<div?class="carousel-item"><img?src="..."?alt="..."><div?class="carousel-caption"><h3>...</h3><p>...</p></div> </div>

易用性問題

輪播組件通常與易用性原則并不沖突。如果你需要被約束的輪播，把請考慮用別的選項呈現你的內容。

這里理解是，如果想要使用超出BS自帶這個輪播組件的功能，加自己添添改改。

如果出了問題解決不了，就另請高明，加載別的插件吧。

用法

多個輪播

輪播要求在最外層的容器（即該.carousel）中用一個id，來讓輪播控件正常工作。如果添加多個輪播，或者修改了一個輪播的id，請務必要更新相關的控件。

根據多個不同的#id控制多個輪播組件同時工作。

利用data屬性

使用data屬性可以輕松控制輪播的滑動方向。data-slide接受一個關鍵詞prev或者next，它用于改變當前滑動的方向。另外，使用data-slide-to可以向輪播傳遞一個原生的索引。data-slide-to="2"可以讓輪播把滑動位置轉到特定的索引，這個索引從0開始計數。

data-ride="carousel"屬性用來標記一個輪播在網頁載入時動畫的起點。它不能用于結合JavaScript顯式初始化同一個輪播（這樣是冗余和不必要的）。

利用JavaScript

調用輪播：

$('.carousel').carousel()

選項

可以利用data屬性或者JavaScript傳遞選項。

如果用data屬性，請把選項名追加到data-后面，比如說寫成data-interval=""。

名稱類型默認值描述

interval	number	5000	這個時間數值用來指定兩次自動滾動之間的延遲。如果設置為false，輪播就不會自動滾動。
pause	string	"hover"	當鼠標進入時中斷輪播的滾動，當鼠標離開時恢復輪播的滾動。
wrap	boolean	true	輪播需要持續滾動，還是擁有一個硬停頓？
keyboard	boolean	true	輪播是否需要響應鍵盤事件？

方法

.carousel(options)

用一個可選的選項object初始化輪播，開始滾動幀。

$('.carousel').carousel({interval:?2000? })

.carousel('cycle')

從左到右開始滾動輪播。

.carousel('pause')

停止滾動輪播。

.carousel(number)

輪播滾動到一個特定的幀（基數是0，類似于一個數組。）

.carousel("prev')

滾到前一幀

.carousel("next")

滾到下一幀。

事件

Bootstrap的輪播類插件為輪播相關的回調函數提供了事件接口。這些事件都有下面的額外的屬性：

• direction: 方向：輪播滑動的方向（可以是 "left" 或者"right"）。

• relatedTarget: 滑動到中間位置的DOM對象，即激活項。

所有的輪播事件在輪播自身上觸發（即，在<div>上面觸發）。

事件類型描述

slide.bs.carousel	在調用slide行為的時候，會立即觸發該事件。
slid.bs.carousel	在滑動過渡完成的時候會觸發該事件。

$('#myCarousel').on('slide.bs.carousel',?function?()?{???//?do?something…?})

例子

這里研究到現在發現的解決辦法。先上例子

<div?id="carousel-example-generic"?class="carousel?slide"?data-ride="carousel"?data-interval=""><ol?class="carousel-indicators"><li?data-target="#carousel-example-generic"?data-slide-to="0"></li><li?data-target="#carousel-example-generic"?data-slide-to="1"></li><li?data-target="#carousel-example-generic"?data-slide-to="2"></li><li?data-target="#carousel-example-generic"?data-slide-to="3"></li></ol><div?class="carousel-inner"?role="listbox"><div?class="carousel-item?active"><img?data-src="holder.js/600x300?theme=sky"?alt="First?slide"><div?class="carousel-caption"><h4>標題~</h4><p>內容！！！<br>1</p><p>內容！！！<br>1</p></div></div><div?class="carousel-item"><img?data-src="holder.js/600x300?bg=#666"?alt="Second?slide"></div><div?class="carousel-item"><img?data-src="holder.js/600x300?bg=#999"?alt="Third?slide"></div><div?class="carousel-item"><img?data-src="holder.js/600x300bg=#333"?alt="4?slide"></div></div><a?class="left?carousel-control"?href="#carousel-example-generic"?role="button"?data-slide="prev"><span?class="icon-prev"?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="icon-next"?aria-hidden="true"></span><span?class="sr-only">Next</span></a> </div> <button?type="button"?onclick="text()">ddd?</button> <script?type="text/javascript">function?text(){$('#carousel-example-generic').carousel({interval:500});$('#carousel-example-generic').carousel('next');$('#carousel-example-generic').carousel();} </script>

將代碼分為兩段：第一段是輪播框。在輪播框的最外層加入屬性data-interval=""后，使用下面的語句，生效。

? $('#carousel-example-generic').carousel({interval:500});

PS：這里有一個問題，當給最外層設置data-interval=空時。輪播頁面是不滾動的。

按下按鈕ddd時，才給賦值。這里摘錄一段話，之前一直忽略的。

可以利用data屬性或者JavaScript傳遞選項。如果用data屬性，請把選項名追加到data-后面，比如說寫成data-interval=""。

應對這個問題，可以考慮輪播組件如果自定義的話，添加初始賦值的方式。

PS：使用.carousel("prev"),無需添加data-*。

????但同樣的方法對"cycle"無效，我很費解。mark！

轉載于:https://my.oschina.net/asktao/blog/647540

總結

以上是生活随笔為你收集整理的4.22、Bootstrap V4自学之路-----内容---轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。