為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

示例

<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>

偽代碼一下，看看結(jié)構(gòu)。

《div id="carousel-example-generic" class="carousel slide" data-ride="carousel"》
--| 《ol class="carousel-indicators"》? 這里是中下處的小圓點(diǎn)。點(diǎn)擊可以切換
--| --| 《li data-target="#carousel-example-generic" data-slide-to="0"》? 這里是每個(gè)小點(diǎn)的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="1"》? 這里是每個(gè)小點(diǎn)的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="2"》? 這里是每個(gè)小點(diǎn)的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="3"》? 這里是每個(gè)小點(diǎn)的指向。
--| 《div class="carousel-inner" role="listbox"》? 這里是圖片盒子，listbox
--| --|《div class="carousel-item active"》? 注意這里是激活狀態(tài)。
--| --| --| 《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"》 這里是輔助設(shè)備使用說(shuō)明。我很喜歡這個(gè)。
--| 《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"》 這里是輔助設(shè)備使用說(shuō)明。我很喜歡這個(gè)。

PS：如果使用圖片處沒(méi)有寫 .active類。則輪播框不會(huì)出現(xiàn)。

PS：出存在兩個(gè) .active類。那如下圖所示，控件按鈕將會(huì)發(fā)生混亂。

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

過(guò)渡動(dòng)畫在IE 9中不受支持。

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

PS：這個(gè)功能有一個(gè)bug，就是當(dāng)?shù)谝豁?yè)是時(shí)，中下部的翻頁(yè)圓點(diǎn)不高亮。對(duì)于處女座的我感覺(jué)有點(diǎn)撓心。

可用的選項(xiàng)

在任何的.carousel-item元素上都可以輕松的通過(guò)使用.carousel-caption來(lái)給你的幻燈片加上說(shuō)明文字。在那里面加上任何可選的 HTML，都將自動(dòng)對(duì)齊和格式化。

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

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

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

易用性問(wèn)題

輪播組件通常與易用性原則并不沖突。如果你需要被約束的輪播，把請(qǐng)考慮用別的選項(xiàng)呈現(xiàn)你的內(nèi)容。

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

如果出了問(wèn)題解決不了，就另請(qǐng)高明，加載別的插件吧。

用法

多個(gè)輪播

輪播要求在最外層的容器（即該.carousel）中用一個(gè)id，來(lái)讓輪播控件正常工作。如果添加多個(gè)輪播，或者修改了一個(gè)輪播的id，請(qǐng)務(wù)必要更新相關(guān)的控件。

根據(jù)多個(gè)不同的#id控制多個(gè)輪播組件同時(shí)工作。

利用data屬性

使用data屬性可以輕松控制輪播的滑動(dòng)方向。data-slide接受一個(gè)關(guān)鍵詞prev或者next，它用于改變當(dāng)前滑動(dòng)的方向。另外，使用data-slide-to可以向輪播傳遞一個(gè)原生的索引。data-slide-to="2"可以讓輪播把滑動(dòng)位置轉(zhuǎn)到特定的索引，這個(gè)索引從0開(kāi)始計(jì)數(shù)。

data-ride="carousel"屬性用來(lái)標(biāo)記一個(gè)輪播在網(wǎng)頁(yè)載入時(shí)動(dòng)畫的起點(diǎn)。它不能用于結(jié)合JavaScript顯式初始化同一個(gè)輪播（這樣是冗余和不必要的）。

利用JavaScript

調(diào)用輪播：

$('.carousel').carousel()

選項(xiàng)

可以利用data屬性或者JavaScript傳遞選項(xiàng)。

如果用data屬性，請(qǐng)把選項(xiàng)名追加到data-后面，比如說(shuō)寫成data-interval=""。

名稱類型默認(rèn)值描述

interval	number	5000	這個(gè)時(shí)間數(shù)值用來(lái)指定兩次自動(dòng)滾動(dòng)之間的延遲。如果設(shè)置為false，輪播就不會(huì)自動(dòng)滾動(dòng)。
pause	string	"hover"	當(dāng)鼠標(biāo)進(jìn)入時(shí)中斷輪播的滾動(dòng)，當(dāng)鼠標(biāo)離開(kāi)時(shí)恢復(fù)輪播的滾動(dòng)。
wrap	boolean	true	輪播需要持續(xù)滾動(dòng)，還是擁有一個(gè)硬停頓？
keyboard	boolean	true	輪播是否需要響應(yīng)鍵盤事件？

方法

.carousel(options)

用一個(gè)可選的選項(xiàng)object初始化輪播，開(kāi)始滾動(dòng)幀。

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

.carousel('cycle')

從左到右開(kāi)始滾動(dòng)輪播。

.carousel('pause')

停止?jié)L動(dòng)輪播。

.carousel(number)

輪播滾動(dòng)到一個(gè)特定的幀（基數(shù)是0，類似于一個(gè)數(shù)組。）

.carousel("prev')

滾到前一幀

.carousel("next")

滾到下一幀。

事件

Bootstrap的輪播類插件為輪播相關(guān)的回調(diào)函數(shù)提供了事件接口。這些事件都有下面的額外的屬性：

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

• relatedTarget: 滑動(dòng)到中間位置的DOM對(duì)象，即激活項(xiàng)。

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

事件類型描述

slide.bs.carousel	在調(diào)用slide行為的時(shí)候，會(huì)立即觸發(fā)該事件。
slid.bs.carousel	在滑動(dòng)過(guò)渡完成的時(shí)候會(huì)觸發(fā)該事件。

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

例子

這里研究到現(xiàn)在發(fā)現(xiàn)的解決辦法。先上例子

<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>標(biāo)題~</h4><p>內(nèi)容！！！<br>1</p><p>內(nèi)容！！！<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=""后，使用下面的語(yǔ)句，生效。

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

PS：這里有一個(gè)問(wèn)題，當(dāng)給最外層設(shè)置data-interval=空時(shí)。輪播頁(yè)面是不滾動(dòng)的。

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

可以利用data屬性或者JavaScript傳遞選項(xiàng)。如果用data屬性，請(qǐng)把選項(xiàng)名追加到data-后面，比如說(shuō)寫成data-interval=""。

應(yīng)對(duì)這個(gè)問(wèn)題，可以考慮輪播組件如果自定義的話，添加初始賦值的方式。

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

????但同樣的方法對(duì)"cycle"無(wú)效，我很費(fèi)解。mark！

轉(zhuǎn)載于:https://my.oschina.net/asktao/blog/647540

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。