移动可滑动切换tab选项卡

所属分类:媒体-Tabs

 92431  536  查看评论 (87)
分享到微信朋友圈
X
移动可滑动切换tab选项卡 ie兼容9
var swiper1 = new Swiper('.swiper1', {
    slidesPerView: 5.5, //头部一行显示多少个 .5表示显示半个
    paginationClickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
    spaceBetween: 10, //slide之间的距离(单位px)。
    freeMode: true, //默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合。
    loop: false, //是否可循环
    onTab: function(swiper) {
        var n = swiper1.clickedIndex;
    }
});

引用js swiper的js css

样式就在页面上  已经写好的  直接用  

下面有联动页面的切换 可以手动翻页,也可以自己写  

相关插件-Tabs

仿原生选项卡切换面板支持手势滑动

本插件是基于swiper插件进行封装的仿原生安卓ios的切换面板效果插件
  Tabs
 36283  439

移动可滑动切换tab选项卡

移动端头部任意多个滑动切换
  Tabs
 92432  536

响应式tab选项卡布局

jQuery响应式tab选项卡布局
  Tabs
 38365  371

jQuery tab产品标签切换

jQuery常用网站产品tab标签切换效果
  Tabs
 20659  244

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

    ? ?爱米の花千骨?ㄎ ? 0
    2022/8/30 17:29:01
    大佬,怎么设置默认列表为第二个呀! 回复
    风群漂流 0
    2022/4/1 23:11:39
    左右按钮加了 可是没效果 请问要怎么操作才可以 回复
    神州爱之殇 0
    2021/6/25 15:35:07
    那位大佬能告诉下 height: 600px;这个高度怎么设置自动? 回复
    沐白 0
    2020/3/17 17:24:13
    我想问一下,就是比如5.5这样,最右边没有显示出来的选项,按一下无法显示完整该怎么做? 回复
    静侯、一切安好 0
    2020/2/25 21:03:24
    大佬,麻烦发我一份,谢谢了 164979146@qq.com 回复
    吃不胖的人 0
    2020/2/3 11:50:06
    能我发一份吗楼主740255321@qq.com 回复
    ? 0
    2019/5/13 20:58:13
    顶部那一栏宽度怎么改,最后一个选项卡跟倒数第二个重叠了,去掉宽度最后一个滚动不出来 回复
    北辰い【邀月】 0
    2019/1/24 17:38:27
    显示swiper1.slides为undefined是怎么回事啊?这个用处是什么呀? 回复
    BaoBaoS 0
    2018/8/28 9:36:04
    顶部那一栏的宽度显示的是行内样式设置,可是找不到,多写几个字样式就不对了,需要改变宽度,在哪里改呀?
        时光与你皆回忆丶0
        2018/11/1 16:29:58
        js 设置
        唯美古派020020
        2019/11/21 10:53:52
        js配置
    回复
    The lamb of God. 0
    2018/8/12 17:55:56
    掌柜,请问一下,如何手指左右滑动切换呢?
        唯美古派020020
        2019/11/21 10:55:58
        用js写一下手机滑动
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复