让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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
PHP守护进程实例
Mar 06 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
微信小程序组件之srcoll-view的详解
Oct 19 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命名空间(Namespace)的使用详解
2013/05/04 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
破解安装Pycharm的方法
2018/10/19 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
化验室技术员岗位职责
2013/12/24 职场文书
进口业务员岗位职责
2014/04/06 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
高一军训决心书
2015/02/05 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
婚宴新郎致辞
2015/07/28 职场文书
民事调解协议书
2016/03/21 职场文书