基于Swiper4 实现的页面拖拽左右滑动效果

所属分类:输入,媒体-拖和放,Tabs

 31345  315  查看评论 (9)
分享到微信朋友圈
X
基于Swiper4 实现的页面拖拽左右滑动效果 ie兼容11

更新时间:2018/12/18 下午5:12:44

更新说明:添加了监听事件:

xsw_swiper({
    index: 0, //默认为0
    data: function(index) { //监听事件
        console.log(index) //监听到的index
    }
})
<div> class='qiHuan' data-index='0'  data-xunClass='xuan'>第一</div>
  • data-index:当前table链接到第几个

  • data-xunClass:当前页的样式

  • <div  data-activeIndex='0'>:data-activeIndex:当前页数的index

相关插件-拖和放,Tabs

jQuery拖拽拉伸缩放插件l_zoom

简约版拖拽拉伸缩放原生jQuery插件 包含 自由缩放 和 等比例缩放 模式 经典还远网页文本框操作简单
  拖和放
 27663  328

拖放交互的想法

在UI中拖放交互的一些想法,这个想法是显示一个可拖拽的区域,代表一个元素被拖拽后的某些动作。
  拖和放
 25721  344

jQuery拖动滑块选择数字插件sider.jquery.js

通过拖动滑块快速输入数值,并可以设置常用的数值快速选择
  拖和放
 27253  313

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 77992  648

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    。花开在静默的半夏 0
    2021/1/26 10:20:52
    彭宏丁 0
    2021/1/21 10:39:16
    插件使用后 若插件里是iframe的话不会出现轻轻一点就翻页的情况 但是 若是平常的html代码 就会出现 你鼠标不小心轻轻一点 也许是向左也许是向右滑动了一点点(几PX) 插件就直接翻页了 求带佬解 回复
    彭宏丁 0
    2020/11/23 17:54:11
    萌新想问一下为什么放到ul里就失效了 回复
    ゆBlUeS.㈨ 0
    2019/1/24 12:12:29
    Uncaught TypeError: Cannot read property 'length' of undefined
    at h.slideTo (swiper.min.js:12)
    at xsw_js.js:45
    为什么出现这种情况 回复
    guo一号 0
    2018/12/20 20:45:10
    _依涵_ 0
    2018/12/18 19:01:03
    我不会唱丁香花 0
    2018/12/18 16:56:22
    打小村里人就说我帅 0
    2018/12/18 11:01:52
    可不可以多兼容ie
    回复
    ... 0
    2018/12/14 16:43:48
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复