swiper和tab相结合

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>swiper和tab相结合</title>
    <link href="http://files.cnblogs.com/files/heyiming/swiper3.3.1.min.css" rel="stylesheet" type="text/css">
    <script src="files/heyiming/jquery-1.8.0.min.js"></script>
    <script src="files.cnblogs.com/files/heyiming/swiper3.3.1.min.js"></script>
<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;
    }
    /*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="480px;">
    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-800px, 0px, 0px);">
        <div class="swiper-slide" style=" 160px;">版块1</div>
        <div class="swiper-slide" style=" 160px;">版块2</div>
        <div class="swiper-slide" style=" 160px;">版块3</div>
        <div class="swiper-slide" style=" 160px;">版块4</div>
        <div class="swiper-slide swiper-slide-prev" style=" 160px;">版块5</div>
        <div class="swiper-slide swiper-slide-visible swiper-slide-active" style=" 160px;">版块6</div>
        <div class="swiper-slide swiper-slide-visible swiper-slide-next" style=" 160px;">版块7</div>
        <div class="swiper-slide active-nav swiper-slide-visible" style=" 160px;">版块8</div>
    </div>
</div>
<!--swiper-tab区域-->

<!--swiper-con区域-->
<div class="swiper-container swiper-container-horizontal" id="swiper-con" style="480px;">
    <div class="swiper-wrapper" style="transform: translate3d(-3360px, 0px, 0px); transition-duration: 0ms;">
        <div class="swiper-slide blue-slide" style=" 480px;">slider1</div>
        <div class="swiper-slide red-slide" style=" 480px;">slider2</div>
        <div class="swiper-slide orange-slide" style=" 480px;">slider3</div>
        <div class="swiper-slide blue-slide" style=" 480px;">slider4</div>
        <div class="swiper-slide red-slide" style=" 480px;">slider5</div>
        <div class="swiper-slide orange-slide" style=" 480px;">slider6</div>
        <div class="swiper-slide blue-slide swiper-slide-prev" style=" 480px;">slider7</div>
        <div class="swiper-slide red-slide swiper-slide-active" style=" 480px;">slider8</div>
    </div>
</div>
<!--swiper-con区域-->



<script>
    var mySwiper2 = new Swiper('#swiper-tab',{
        watchSlidesProgress : true,//开启这个参数来计算每个slide的progress(进度) 对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，
从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-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 : 3,//将tabs块儿平均分成几份

        /*点击了上面的滑块时，下面的内容区也跟着变化  若去掉后，拖动下面上面可继续移动*/
        onTap: function(){
            mySwiper3.slideTo( mySwiper2.clickedIndex)
        }



    })
    var mySwiper3 = new Swiper('#swiper-con',{

        onSlideChangeStart: function(){
            updateNavPosition()
        }

    })

    function updateNavPosition(){
//默认哪一块是被选中的状态
        $('#swiper-tab .active-nav').removeClass('active-nav')
        var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');


        if (!activeNav.hasClass('swiper-slide-visible')) {
            console.log(1);
            if (activeNav.index()>mySwiper2.activeIndex) {
                console.log(2);
                var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1
                mySwiper2.slideTo(activeNav.index()-thumbsPerNav)
            }
            else {
                console.log(3);
                mySwiper2.slideTo(activeNav.index())
            }
        }
    }
</script>

<!--content-->

</body>
</html>
效果图：