zoukankan      html  css  js  c++  java
  • Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    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');
     });

    hammer.js 官网:http://hammerjs.github.io/ ,版本基于v2.0.4:

    var carousel = new Hammer(document.getElementById("carousel"));
                carousel.on('swipeleft', function(){
                    $(this).carousel('next');
                });
    
                carousel.on('swiperight', function(){
                    $(this).carousel('prev');
                });
  • 相关阅读:
    Vue基础第三章
    Vue基础第二章
    Vue基础第一章
    AWS笔记
    导入Dynamic Web Project后程序有红叉但是可以运行
    JSTL配置文件下载地址
    access纯jdbc连接
    XML学习总结二——DTD
    【转】无题
    XML学习总结一
  • 原文地址:https://www.cnblogs.com/gisblogs/p/4975303.html
Copyright © 2011-2022 走看看