swiper tab實例

時間 2019-11-18
標籤 swiper tab 實例简体版
原文原文鏈接
雖然我是個精緻的豬豬女孩css
但這個demo寫的確實很醜app
只爲說明問題！！！忽略樣式ide
上代碼：oop
<body>
<style type="text/css">
    #swiper-tab .swiper-slide{
        line-height:2 !important;
        color:#666 !important;
        font-size:14px !important;
        background:#eee !important;
    }
    #swiper-tab .active-nav{
        background:red !important;
    }
    #swiper-tab .swiper-slide {
      width: auto;
      cursor: pointer;
    }
    #swiper-tab .swiper-slide > div {
        padding: 0 50px;
    }
    /*tabs文字居中*/
    #swiper-tab{
        text-align: center;
    }
    /*給con部分加上一個背景色*/
    #swiper-con{
        background: yellow;
        height:300px;
    }
</style>

<!--swiper-tab區域-->
<div class="swiper-container swiper-container-horizontal" id="swiper-tab" style="width:480px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide active-nav"><div>版塊1</div></div>
        <div class="swiper-slide"><div>版塊2</div></div>
        <div class="swiper-slide"><div>版塊3</div></div>
        <div class="swiper-slide"><div>版塊4</div></div>
        <div class="swiper-slide"><div>版塊5</div></div>
        <div class="swiper-slide"><div>版塊6</div></div>
        <div class="swiper-slide"><div>版塊7</div></div>
        <div class="swiper-slide"><div>版塊8</div></div>
        <div class="swiper-slide"><div>版塊9</div></div>
    </div>
</div>
<!--swiper-tab區域-->

<!--swiper-con區域-->
<div class="swiper-container swiper-container-horizontal" id="swiper-con" style="width:480px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide blue-slide" style="width: 480px;">slider1</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider2</div>
        <div class="swiper-slide orange-slide" style="width: 480px;">slider3</div>
        <div class="swiper-slide blue-slide" style="width: 480px;">slider4</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider5</div>
        <div class="swiper-slide orange-slide" style="width: 480px;">slider6</div>
        <div class="swiper-slide blue-slide" style="width: 480px;">slider7</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider8</div>
        <div class="swiper-slide red-slide" style="width: 480px;">slider9</div>
    </div>
    <div class="swiper-button-next" id="next"></div>
    <div class="swiper-button-prev" id="prev"></div>
</div>
<!--swiper-con區域-->
<script>
    var mySwiper2 = new Swiper('#swiper-tab',{
      
        watchSlidesProgress : true, //開啓這個參數來計算每一個slide的progress(進度) 對於slide的progress屬性，活動的那個爲0，其餘的依次減1。例：若是一共有6個slide，活動的是第三個，
                                    // 從第一個到第六個的progress屬性分別是：二、一、0、-一、-二、-3。對於swiper的progress屬性，活動的slide在最左（上）邊時爲0，活動的slide在最右（下）邊時爲1，其餘狀況平分。例：有6個slide，
                                    // 當活動的是第三個時swiper的progress屬性是0.4，當活動的是第五個時swiper的progress屬性是0.8。swiper的progress其實就是wrapper的translate值的百分值，與activeIndex等屬性不一樣，
                                    // progress是隨着swiper的切換而不停的變化，而不是在某個時間點突變。
        watchSlidesVisibility : true,//若是開啓了watchSlidesVisibility，則會在每一個可見slide增長一個classname，默認爲'swiper-slide-visible'
        slidesPerView : 'auto',//將tabs塊兒平均分紅幾份
        preventClicks : false,

        on:{
          click:function(){
            $('#swiper-tab .swiper-slide').removeClass('active-nav')
            $('#swiper-tab .swiper-slide').eq(mySwiper2.clickedIndex).addClass('active-nav');
            //alert(mySwiper2.clickedIndex);
            mySwiper3.slideToLoop(mySwiper2.clickedIndex);
          }
        }
    })
    var mySwiper3 = new Swiper('#swiper-con',{
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
    var prevIndex = 0,
        currentIndex = 0;
    mySwiper3.on('slideChangeTransitionEnd', function () {
        //默認哪一塊是被選中的狀態
        $('#swiper-tab .swiper-slide').removeClass('active-nav');       //移除全部active-nav
        $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');    //給當前tab加active-nav
        //var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
        var len  = $('#swiper-tab .swiper-slide.swiper-slide-visible').length,      //獲取可視區域內標籤的個數
            totalWidth = 0,         //定義可視區域內標籤個數對應的寬度總和
            tabWidth = $('#swiper-tab').width();        //定義可視區域的寬度
        for(var i = 0; i < len; i++) {
            totalWidth += $('#swiper-tab .swiper-slide.swiper-slide-visible').eq(i).width();        //賦值
        }

        prevIndex = currentIndex;       //把前一個標籤的下表賦值給prevIndex
        currentIndex = mySwiper3.activeIndex;   //把當前tab的下表賦值給currentIndex
        if(prevIndex < currentIndex) {   
            mySwiper2.slideNext();
        } else {
            mySwiper2.slidePrev();
        }
    });    
</script>

<!--content-->

</body>
效果以下：spa
該示例針對slidesPerView : 'auto'的狀況，slidesPerView 爲固定值也是一樣的道理！code
有問題請留言哦！blog
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。