专栏首页ytkahBootstrap幻灯轮播如何支持触屏左右滑动手势?

Bootstrap幻灯轮播如何支持触屏左右滑动手势?

  最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销。bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了。下面是幻灯片的原始html代码

    <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
        <ol class="carousel-indicators">
          <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
          <li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
          <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
        </ol>
        <div role="listbox" class="carousel-inner">
          <div class="item">
            <img alt="First slide" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" data-holder-rendered="true">
          </div>
          <div class="item active">
            <img alt="Second slide [1140x500]" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" data-holder-rendered="true">
          </div>
          <div class="item">
            <img alt="Third slide [1140x500]" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" data-holder-rendered="true">
          </div>
        </div>
        <a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
          <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
          <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>

  关键的步骤来了,我们需要写一个javascript命令调用hammer.js中的swipe功能

  <script>
          $(function(){
            var myElement= document.getElementById('carousel-example-generic')
            var hm=new Hammer(myElement);
            hm.on("swipeleft",function(){
                $('#carousel-example-generic').carousel('next')
            })
            hm.on("swiperight",function(){
                $('#carousel-example-generic').carousel('prev')
            })
        })
  </script>
  div的id一定要对应,上面是carousel-example-generic,javascript中也要这个,否则不能实现。
  需要注意的是,jquery版本最好是1.9版本的jquery-1.9.1.min.js,否则可能在电脑上可以实现手势滑动,而在手机上无法触摸滑动
  javascript命令这个是关键,不会写不会改就不好玩了。做个标记,方便日后查询

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • dedecms自增标签[field:global.autoindex/]的运用

      用bootstrap建站时用到幻灯片切换模块,里面有个active(下面代码中的data-slide-to="0"),其余的按顺序递增(1,2),如果用de...

    ytkah
  • 一行js弹窗代码就能设计漂亮的弹窗广告

      接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一...

    ytkah
  • bootstrap tab切换如何让鼠标移动自动切换内容

      bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示。bootstrap tab切换默认是要点击才会切换的,如何...

    ytkah
  • 软银数百亿美元投资WeWork?中国联合办公将重构估值体系

    10月10日,《华尔街日报》引述消息人士报道称,软银正在洽购共享办公巨头WeWork的大部分股权,这笔投资总额可能在150亿美元到200亿美元之间,如果该消息坐...

    罗超频道
  • 业界 | 作为百度AI技术的集大成者,最新升级的百度大脑3.0有何亮点?

    大会现场,百度不仅分享了公司在 AI 技术、产品与平台等方面的研究成果与最新进展,还宣布了百度大脑的重磅升级,3.0 版本正式问世。

    机器之心
  • 标书模板:结直肠癌肿瘤干细胞靶向疗法研究

    近年来,随着人口老龄化和生活方式的改变,结直肠癌发病率明显上升。目前全球范围内,结直肠癌是最常见的三大肿瘤之一。根据世界卫生组织的一项调查研究报告,中国结直肠癌...

    用户6317549
  • 点击劫持(ClickJacking)漏洞挖掘及实战案例全汇总

    点击劫持(Click Jacking)是一种视觉上的欺骗手段,攻击者通过使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在该页面上进行操作,通过调整i...

    Jayway
  • 学了两天 react,乱讲一下学习思路,顺便弄了一个脚手架

    现在的项目基本上都是前后端分离的,后端就先不提了。前端的框架也是层出不穷,使用最多的就是 angular、vue、react 。angular 是前几年用的比较...

    古时的风筝
  • 拦截器(Interceptor)和过滤器(Filter)的执行顺序和区别

    本来想记录一下关于用户登陆和登陆之后的权限管理、菜单管理的问题,想到解决这个问题用到Interceptor,但想到了Interceptor,就想到了Filter...

    好好学java
  • 3CDB:基于3C技术的染色质互作信息数据库

    3CDB是一个染色质空间互作的数据库,根据特定的关键词从pubmed数据库中进行文献检索,查找基于3C技术研究染色质互作的文献,并从中提取染色质互作信息,对应的...

    生信修炼手册

扫码关注云+社区

领取腾讯云代金券