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

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

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

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

因為最近開發(fā)的項目涉及到移動設(shè)備上的 HTML5 開發(fā),其中需要實現(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ǎo)入整個 jQuery Mobile 貌似有些大材小用,
而 TouchSwipe 在兩邊可點擊按鈕區(qū)域滑動無效,然后選擇了 Hammer。

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

關(guān)鍵詞:Bootstrap

贊助商鏈接:

主站蜘蛛池模板: 黔东| 麻江县| 泰安市| 盐源县| 金平| 巩义市| 龙胜| 青铜峡市| 固原市| 四平市| 岐山县| 九江市| 砀山县| 廊坊市| 岗巴县| 仪征市| 灵宝市| 砀山县| 昭平县| 孝昌县| 玉屏| 迭部县| 吉首市| 微博| 曲水县| 牟定县| 遂昌县| 金华市| 定远县| 珲春市| 青田县| 霍林郭勒市| 依兰县| 宝应县| 隆化县| 厦门市| 昌平区| 穆棱市| 祁东县| 台中县| 红原县|