移动可滑动切换tab选项卡

所属分类:媒体-Tabs

移动可滑动切换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

jQuery功能展示Tabs

jQuery功能展示插件tabswitch.js
  Tabs
 11702  213

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

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

基本jquery的菜单标签页选项插件(原创)

很容易将此插件集成到你的平台当中
  Tabs
 5819  50

比较不错的选项卡插件

Material Design风格实用Tabs选项卡 jquery+css3+html5
  Tabs
 11174  77

讨论这个项目(59)回答他人问题或分享插件使用方法奖励jQ币

    coquettish_chubby 0
    2018/1/11 16:54:59

    为啥我分享了没有给币呢

    回复
    coquettish_chubby 0
    2018/1/11 16:51:35

    用着还行

        玩玩玩哇0
        2018/1/17 9:48:31

        大佬 可以发一下这个么

    回复
    mochen91 0
    2018/1/9 21:16:14

    现在还能麻烦发一份吗?正是想要的,用的是swiper JS库。

    mochen91#gmail.com   (#换成@)

    回复
    mochen91 0
    2018/1/9 21:12:25
    还真正好是想要的,和swiper搭的。 回复
    D ??RING 0
    2018/1/9 17:30:15

    怎么动态添加导航栏 添加了就不能用  为啥

    回复
    Lyl路缘 0
    2018/1/5 11:26:56
    selected  当前红色的横线  怎么设置成有滑动效果的 回复
    ┽?初、夏ミ 0
    2017/12/27 17:09:51

    我用的时候为什么下面内容的高才是68px?

        ┽?初、夏ミ0
        2017/12/27 17:12:02

        原来你写头部的css样式不能外链

    回复
    !。???? 0
    2017/12/24 22:08:12
    自招 0
    2017/12/11 16:33:55

    请教一下上面导航的每个选项卡的宽度怎么修改?

        时光与你皆回忆丶0
        2017/12/12 9:44:26
        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;
            }
        });

        slidesPerView: 5.5, //头部一行显示多少个 .5表示显示半个  改这个

    回复
    大将军 0
    2017/12/5 15:10:19

    986893999@qq.com 谢谢大佬

        病猫0
        2017/12/12 11:37:45
        在吗可以分享一下吗1316884406@qq.com
        玩玩玩哇0
        2018/1/16 10:34:51
        可以发一下么 谢谢大佬 285440475@qq.com
    回复
取消回复