让bootstrap的carousel支持滑动滚屏的实现代码


Posted in Javascript onNovember 27, 2017

原始的轮播组件,并不支持滑动滚屏:

代码如下:

<span style="white-space:pre">  </span><div class="row"> 
    <div id="carousel-generic" class="carousel slide" 
      data-ride="carousel"> 
      <ol class="carousel-indicators"> 
        <li data-target="#carousel-generic" data-slide-to="0" 
          class="active"></li> 
        <li data-target="#carousel-generic" data-slide-to="1"></li> 
        <li data-target="#carousel-generic" data-slide-to="2"></li> 
      </ol> 
 
      <div class="carousel-inner" style="text-align: center"> 
        <div class="item active"> 
          <img alt="First slide" src="img/slide/1.png"></img> 
        </div> 
        <div class="item"> 
          <img alt="Second slide" src="img/slide/2.png"></img> 
        </div> 
        <div class="item"> 
          <img alt="Third slide" src="img/slide/3.png"></img> 
        </div> 
      </div> 
 
      <a class="left carousel-control" href="#carousel-generic" rel="external nofollow" rel="external nofollow"  
        data-slide="prev"> <span 
        class="glyphicon glyphicon-chevron-left"></span> 
      </a> <a class="right carousel-control" href="#carousel-generic" rel="external nofollow" rel="external nofollow"  
        data-slide="next"> <span 
        class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
    </div> 
  </div>

上面的方式,可以通过点击左右两边的箭头触发切换,但无法滑动切换。当然,自动切换还是可以的。

解决上述问题,方法其实也较多,比较方便的是使用hammer。

在此之前,需要下载hammer.min.js,jquery.hammer.js.。

下载不了的可以在我的资源里下载hammer.zip

代码如下:

<--! js顺序 --> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/hammer/hammer.min.js"></script> 
<script type="text/javascript" src="js/hammer/jquery.hammer.js"></script> 
[javascript] view plain copy
//有需求的可以把左右箭头注释掉 
$('#carousel-generic').hammer().on('swipeleft', function(){ 
  $(this).carousel('next'); 
}); 
$('#carousel-generic').hammer().on('swiperight', function(){ 
  $(this).carousel('prev'); 
});

总结

以上所述是小编给大家介绍的让bootstrap的carousel支持滑动滚屏的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
vue组件实例解析
Jan 10 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
基于vue2.0实现简单轮播图
Nov 27 #Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python高斯消除矩阵
2019/01/02 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python如何读写字节数据
2020/08/05 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
学校经典推荐信
2013/10/30 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
个人校本研修方案
2014/05/26 职场文书
医学专业自荐信
2014/06/14 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技