让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 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JSONObject使用方法详解
Dec 17 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
微信小程序反编译的实现
Dec 10 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使用codebase生成随机数
2014/03/25 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python并发和异步编程实例
2018/11/15 Python
python面向对象法实现图书管理系统
2019/04/19 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
金融专业推荐信
2013/11/14 职场文书
大学军训感言600字
2014/02/25 职场文书
卫生巾广告词
2014/03/18 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python