移动可滑动切换tab选项卡

所属分类:媒体-Tabs

 12928  112  查看评论 (61)
移动可滑动切换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渐变切换tab标签

jquery渐变切换tab标签
  Tabs
 7921  27

jQuery功能展示Tabs

jQuery功能展示插件tabswitch.js
  Tabs
 12968  230

京东首页的多重tab

京东首页的多重tab
  Tabs
 11311  51

移动可滑动切换tab选项卡

移动端头部任意多个滑动切换
  Tabs
 12929  112

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

    君千雪 0
    2018/2/6 18:05:25

    能我发一份吗楼主1205798203@qq.com

    回复
    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

    多谢

        SSM010
        2018/3/30 1:33:15
        谁有代码?发一下,谢谢
    回复
    自招 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表示显示半个  改这个

    回复
取消回复