成人午夜激情影院,小视频免费在线观看,国产精品夜夜嗨,欧美日韩精品一区二区在线播放

讓Bootstrap輪播插件carousel支持左右滑動(dòng)手勢的三種方法

2014-07-16 15:16:02來源:CSDN作者:lihaiping_

因?yàn)樽罱_發(fā)的項(xiàng)目涉及到移動(dòng)設(shè)備上的 HTML5 開發(fā),其中需要實(shí)現(xiàn)輪播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并沒有支持手勢。

因?yàn)樽罱_發(fā)的項(xiàng)目涉及到移動(dòng)設(shè)備上的 HTML5 開發(fā),其中需要實(shí)現(xiàn)輪播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并沒有支持手勢。

然后......自己想辦法唄,再然后,就有下面3種解決方案 :

jQuery Mobile (http://jquerymobile.com/download/)
 $("#carousel-generic").swipeleft(function() {
  $(this).carousel('next');
 });

 $("#carousel-generic").swiperight(function() {
  $(this).carousel('prev');
 });

TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)
 $("#carousel-generic").swipe({
  swipeLeft: function() { $(this).carousel('next'); },
  swipeRight: function() { $(this).carousel('prev'); },
 });

hammer.js (http://eightmedia.github.io/hammer.js/) +
jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)
 $('#carousel-generic').hammer().on('swipeleft', function(){
  $(this).carousel('next');
 });

 $('#carousel-generic').hammer().on('swiperight', function(){
  $(this).carousel('prev');
 });

單單為了支持滑動(dòng)手勢而導(dǎo)入整個(gè) jQuery Mobile 貌似有些大材小用,
而 TouchSwipe 在兩邊可點(diǎn)擊按鈕區(qū)域滑動(dòng)無效,然后選擇了 Hammer。

英文原文:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/ 

關(guān)鍵詞:Bootstrap

贊助商鏈接:

主站蜘蛛池模板: 东丰县| 威宁| 建湖县| 阿克苏市| 虞城县| 沅江市| 黔江区| 广昌县| 武义县| 车险| 于田县| 广元市| 沾化县| 东光县| 台中市| 武穴市| 鄂州市| 龙江县| 西平县| 潞城市| 雅江县| 金溪县| 邵阳市| 东宁县| 莲花县| 通河县| 卢龙县| 巴彦淖尔市| 武平县| 基隆市| 德庆县| 云林县| 昔阳县| 宁乡县| 靖边县| 鱼台县| 古浪县| 乌拉特中旗| 乐至县| 若尔盖县| 永靖县|