小編給大家分享一下如何讓bootstrap的carousel支持滑動(dòng)滾屏,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供蓮都企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為蓮都眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
原始的輪播組件,并不支持滑動(dòng)滾屏:
代碼如下:
上面的方式,可以通過(guò)點(diǎn)擊左右兩邊的箭頭觸發(fā)切換,但無(wú)法滑動(dòng)切換。當(dāng)然,自動(dòng)切換還是可以的。
解決上述問(wèn)題,方法其實(shí)也較多,比較方便的是使用hammer。
在此之前,需要下載hammer.min.js,jquery.hammer.js.。
下載不了的可以在我的資源里下載hammer.zip
代碼如下:
<--! js順序 --> [javascript] view plain copy //有需求的可以把左右箭頭注釋掉 $('#carousel-generic').hammer().on('swipeleft', function(){ $(this).carousel('next'); }); $('#carousel-generic').hammer().on('swiperight', function(){ $(this).carousel('prev'); });
以上是“如何讓bootstrap的carousel支持滑動(dòng)滾屏”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!