让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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP代码加密的方法总结
2020/03/13 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python保存文件方法小结
2018/07/27 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
信号生成及DFT的python实现方式
2020/02/25 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
装修致歉信
2014/01/15 职场文书
一月红领巾广播稿
2014/02/11 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Django+Celery实现定时任务的示例
2021/06/23 Python