本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • swiper移动端导航栏滑动切换选项卡代码
    时间:2019-11-29 14:09 来源:开源之家 作者:开源之家测试提供 下载:175 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:104 KB
    • 运行环境:HTML
    • 下载次数:175 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    swiper移动端导航栏滑动切换选项卡代码

    特效描述:swiper 移动端导航栏 滑动切换选项卡,swiper.js制作手机移动端导航滑动tab选项卡切换代码

    代码结构

    1. 引入CSS

    1
    2
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css">
    <link rel="stylesheet" href="css/swiper-3.2.7.min.css" />

    2. 引入JS

    1
    2
    3
    <script src="js/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
    <script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>

    3. HTML代码

    <div class="container">
                <div class="swiper-container swiper1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide selected">推荐</div>
                        <div class="swiper-slide">菜单 2</div>
                        <div class="swiper-slide">菜单 3</div>
                        <div class="swiper-slide">菜单 4</div>
                        <div class="swiper-slide">菜单 5</div>
                        <div class="swiper-slide">菜单 6</div>
                        <div class="swiper-slide">菜单 7</div>
                        <div class="swiper-slide">菜单 8</div>
                        <div class="swiper-slide">菜单 9</div>
                        <div class="swiper-slide">菜单 10</div>
                    </div>
                </div>
                <!-- swiper2 -->
                <div class="swiper-container swiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-no-swiping">
                            <div style="width: 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div>
                        </div>
                        <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222</div>
                        <div class="swiper-slide swiper-no-swiping">内容 213213123</div>
                        <div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
                        <div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
                        <div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
                        <div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
                        <div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
                        <div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
                        <div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
                    </div>
                </div>
            </div>
            <script>
                $(function() {
                    function setCurrentSlide(ele, index) {
                        $(".swiper1 .swiper-slide").removeClass("selected");
                        ele.addClass("selected");
                        //swiper1.initialSlide=index;
                    }
                    var swiper1 = new Swiper('.swiper1', {
    //                  设置slider容器能够同时显示的slides数量(carousel模式)。
    //                  可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
    //                  loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
                        slidesPerView: 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;
                        }
                    });
                    swiper1.slides.each(function(index, val) {
                        var ele = $(this);
                        ele.on("click", function() {
                            setCurrentSlide(ele, index);
                            swiper2.slideTo(index, 500, false);
                            //mySwiper.initialSlide=index;
                        });
                    });
                    var swiper2 = new Swiper('.swiper2', {
                        //freeModeSticky  设置为true 滑动会自动贴合  
                        direction: 'horizontal',//Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。
                        loop: false,
    //                  effect : 'fade',//淡入
                        //effect : 'cube',//方块
                        //effect : 'coverflow',//3D流
    //                  effect : 'flip',//3D翻转
                        autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。
                        onSlideChangeEnd: function(swiper) {  //回调函数,swiper从一个slide过渡到另一个slide结束时执行。
                            var n = swiper.activeIndex;
                            setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                            swiper1.slideTo(n, 500, false);
                        }
                    });
                });
            </script>

    swiper移动端导航栏滑动切换选项卡代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信