thinkphp標簽實現(xiàn)bootsrtap輪播carousel實例代碼
更新時間:2017年02月19日 10:57:47 作者:QTFYING
這篇文章給大家介紹thinkphp標簽實現(xiàn)bootsrtap輪播carousel實例代碼,非常不錯,具有參考借鑒價值,需要的的朋友參考下
由于輪播carousel第一個div需要設(shè)置active樣式才能正常顯示,上面的圓點也同樣需要數(shù)字,
使用volist標簽在循環(huán)的同時可以取得下標(foreach,for標簽實現(xiàn)不了)
<div class="Container"> <!-- carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <volist name="bopic" id="xt"> <li data-target="#carousel-example-generic" data-slide-to="{$i-1}" class="<if condition="$i eq 1 ">active</if>"></li> </volist> </ol> <div class="carousel-inner"> <volist name="bopic" id="xt"> <div class='item <if condition="$i eq 1 ">active</if>'> <img src="{$xt.page_bopic_image}" alt="{$xt.page_bopic_seo}"/> </div> </volist> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- /.carousel --> </div>
以上所述是小編給大家介紹的thinkphp標簽實現(xiàn)bootsrtap輪播carousel實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
關(guān)于TypeScript中import JSON的正確姿勢詳解
2012年10月首度對外公布typescript(當時已經(jīng)是0.7?的版本)同時開源,ts的編譯器是用js編寫的(后來改成ts?),可以在線編寫。下面這篇文章主要給大家介紹了關(guān)于TypeScript中import JSON的正確姿勢,需要的朋友可以參考下。2017-07-07ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù),通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新,本篇文章給大家介紹ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回,感興趣的朋友一起來學(xué)習(xí)2015-08-08JavaScript 中獲取數(shù)組最后一個元素方法匯總
在JavaScript中,獲取數(shù)組最后一個元素的方法有很多種。今天我們就來匯總一下JavaScript獲取數(shù)組最后一個元素的幾種方法,需要的朋友可以參考下2023-02-02