第十篇BootStrap輪播插件使用詳解
Bootstrap 輪播插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外,內(nèi)容也是足夠靈活的,可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。
使用bootstrap的輪播插件可以向站點(diǎn)添加滑塊,內(nèi)容可以是圖像,內(nèi)嵌框架,視頻或其它任何內(nèi)容,使用輪播插件需要引入bootstrap.min.js.
先給大家展示下效果圖,如果大家感覺還不錯(cuò),請(qǐng)參考實(shí)現(xiàn)代碼。
效果圖如下所示:
關(guān)鍵代碼如下:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!—輪播導(dǎo)航 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!—輪播項(xiàng)目 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="~/images/Chrysanthemum.jpg" /> <div class="carousel-caption"> ffffffff </div> </div> <div class="item"> <img src="~/images/Desert.jpg" /> <div class="carousel-caption"> xxxxxxxxxxxxxxxx </div> </div> <div class="item"> <img src="~/images/Lighthouse.jpg" /> <div class="carousel-caption"> mmmmmmmmmmmm </div> </div> </div> <!—輪播導(dǎo)航 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></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"></span> <span class="sr-only">Next</span> </a> </div>
以上所述是小編給大家介紹的第十篇BootStrap輪播插件使用詳解的全部敘述,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery簡(jiǎn)單自定義圖片輪播插件及用法示例
- jQuery自適應(yīng)輪播圖插件Swiper用法示例
- jQuery的圖片輪播插件PgwSlideshow使用詳解
- Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標(biāo)簽切換等)
- Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
- BootStrap 輪播插件(carousel)支持左右手勢(shì)滑動(dòng)的方法(三種)
- jQuery插件實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播插件——前端開發(fā)必看
- jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果
- 簡(jiǎn)單的漸變輪播插件
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)進(jìn)度條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JS根據(jù)Unix時(shí)間戳顯示發(fā)布時(shí)間是多久前【項(xiàng)目實(shí)測(cè)】
小編最近在實(shí)現(xiàn)這樣的需求類似微信朋友圈顯示發(fā)布時(shí)間為距離當(dāng)前時(shí)間多久之前這樣的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2019-07-07原生js實(shí)現(xiàn)密碼強(qiáng)度驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)密碼強(qiáng)度驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03詳解如何替換項(xiàng)目中的if-else和switch
這篇文章主要為大家介紹了詳解如何替換項(xiàng)目中的if-else和switch,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11javascript 正則表達(dá)式相關(guān)應(yīng)介紹
javascript 中幾個(gè)與正則表達(dá)式相關(guān)的應(yīng)用,本文將詳細(xì)介紹,需要的朋友可以參考下2012-11-11Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我們一般用來請(qǐng)求后臺(tái)返回具有l(wèi)abel和text對(duì)象的json數(shù)組即可渲染。接下來通過本文給大家分享Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2017-07-07淺談JavaScript中的String對(duì)象常用方法
這篇文章主要介紹了JavaScript中的String對(duì)象常用方法,非常簡(jiǎn)單實(shí)用,有需要的小伙伴參考下2015-02-02