一直觉得 bootstrap 的轮播用起来很好用,代码简单,又支持响应式,

  但从未想过也不知道 bootstrap 的轮播竟然不支持在手机上左右滑动

  解决方法就是:

  使用滑动手势 js 插件:hammer.js(百度CDN资源库链接:http://cdn.code.baidu.com/

  然后在head中加载以后,通过 js 把 swipe 功能调用出来就可以了,下面是 js 命令调用 hammer.js 中的 swipe 功能代码

  1. <script>
  2. $(function() {
  3. var myElement = document.getElementById('carousel-example-generic')
  4. var hm = new Hammer(myElement);
  5. hm.on("swipeleft", function() {
  6. $('#carousel-example-generic').carousel('next')
  7. })
  8. hm.on("swiperight", function() {
  9. $('#carousel-example-generic').carousel('prev')
  10. })
  11. })
  12. </script>

  原文出处链接http://www.cnblogs.com/ytkah/p/5624142.html

Bootstrap轮播如何支持移动端左右滑动的更多相关文章

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

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  2. lightSlider 好图片轮播插件 支持移动端

    http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider https://github.co ...

  3. 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  6. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  7. Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  8. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  9. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

随机推荐

  1. The history of programming languages.(transshipment) + Personal understanding and prediction

    To finish this week's homework that introduce the history of programming languages , I surf the inte ...

  2. Spring再接触 模拟Spring

    项目分层: 1.最土的方法是直接写到main中去 2.分出model层 2.如下 4.在抽象一个对数据库的访问层(跨数据库实现) 面向抽象编程 User.java package com.bjsxt. ...

  3. Object.assign()怎么用?

    用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 1.以对象为参数的合并1)Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 con ...

  4. convert 函数的使用

    先说问题:今天项目中很多模块出现了一个集体性的问题,时间检索时选择同一天 检索不出数据(表中数据确实存在),其实这个问题在做东西的时候领导说过,记忆中我解决了,但是后来写代码可能把这个问题忘记了! 其 ...

  5. [leetcode]44. Wildcard Matching万能符匹配

    Given an input string (s) and a pattern (p), implement wildcard pattern matching with support for '? ...

  6. 解决:AttributeError: module 'requests' has no attribute 'post'”

    今天学习Requests库,当用pip install requests安装后,写了一段代码报错:AttributeError: module ‘requests‘ has no attribute ...

  7. 二、putty的下载安装和基本使用方法教程

    转载自:https://baijiahao.baidu.com/s?id=1597811787635071952&wfr=spider&for=pc PuTTY是一款开源(Open S ...

  8. 设置textfield 文字左边距

    默认情况下,当向textField输入文字时,文字会紧贴在textField左边框上.我们可以通过设置textField的leftView,设置一个只有宽度的leftView.这样还不够,因为默认le ...

  9. [BeijingWc2008]雷涛的小猫

    --BZOJ1270 Description 雷涛的小猫雷涛同学非常的有爱心,在他的宿舍里,养着一只因为受伤被救助的小猫(当然,这样的行为是违反学生宿舍管理条例的). 在他的照顾下,小猫很快恢复了健康 ...

  10. boost学习 内嵌类型检测 与 any 的代码练习

    本文是学习 boost源码的一些练习 参考文章来自 刘未鹏 C++的罗浮宫(http://blog.csdn.net/pongba) 目录 http://blog.csdn.net/pongba/ar ...