相思资源网 Design By www.200059.com
轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢。
以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法。
HTML部分
<div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2" style="width:50%;overflow:hidden;margin:0 auto;"> <div id="carousel-example-generic0" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic0" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic0" data-slide-to="1"></li> <li data-target="#carousel-example-generic0" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" id="carousel-inner-z" role="listbox"> <div class="item active"> <img width="100%" src="/UploadFiles/2021-04-02/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg">JS部分
var carousel_=$("#carousel-example-generic0"); $("#goods_lunbo").touchwipe({ ReferenceMaterial:"#goods_lunbo2",//套的div distance : 100,//表示滑动的距离 wipeLeftFn:function(){console.log("佐佐佐");carousel_.carousel('prev');},//向左滑动屏幕 wipeRightFn:function(){console.log("呦呦呦");carousel_.carousel('next');},//向右滑动屏幕 nowipe:function(){} });以上所述是小编给大家介绍的Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片的评论...