Swiper多级联动

最近在“大疆”的官网中看到，它在产品介绍页中运用了大量的轮播联动效果，而且效果非常好，在视觉上的体验也是给人一种产品高级的感觉。那就看看这样的联动效果是如何实现的。打开控制台，可以很明显的看到是用Swiper来做的。

https://www.dji.com/cn/zenmuse-x7?site=brandsite&from=landing_page

这里可以看到是一个控制三个地方的变化，也就是说，它用的是Swiper双向控制的思路，但不是双向控制的做法，本人认为Swiper的双向控制需要做两个容器有点麻烦了，“大疆”的做法用的是Swiper内置的一些方法来做，现就“大疆”的这种思路来写一个简单的Swiper多级联动效果。

1、引入相关插件

 <link rel="stylesheet" href="../css/swiper.css">
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="../js/swiper.js"></script>

2、编写view(界面)

<div class="box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide blue">slider1</div>
            <div class="swiper-slide yellow">slider2</div>
            <div class="swiper-slide red">slider3</div>
            <div class="swiper-slide green">slider4</div>
        </div>
        <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
</div>
<div class="span-title">
    <span class="show">slider1</span>
    <span>slider2</span>
    <span>slider3</span>
    <span>slider4 </span>

</div>
<div class="title">
    <div class="side"></div>
</div>
<ul class="tips">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

3、编写style

   *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background: #000;
            margin: 0 auto;
        }
        .swiper-container{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 500px;
            color: #ffffff;
            font-size: 50px;
        }
        .blue{
            background: #5d5aff;
        }
        .yellow{
            background: #f4eb77;
        }
        .red{
            background: #ff4e4e;
        }
        .green{
            background: green;
        }
        .title{
            width: 500px;
            height:20px;
            background: #303233;
            margin: 50px auto;
            position: relative;
        }
        .side{
            width: 25%;
            height: 100%;
            background: #ff4e4e;
            position: absolute;
            left: 0;
        }
        .span-title{
            width: 500px;
            height: 50px;
            position: relative;
            margin: 0 auto;
        }
        .span-title span{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 25px;
            display: none;
        }
        .show{
            display: block!important;
        }
        .tips{
            width: 500px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            list-style: none;
        }
        .tips li{
            width: 23.33%;
            background: #00bebe;
            cursor: pointer;
        }

4、编写js

$(function () {
        let width = $(".side").width();
        let mySwiper = new Swiper('.box .swiper-container', {
            autoplay:false,
            loop:true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on:{
                slideChange:function () {
                    let spanTitle = $(".span-title>span").eq(this.realIndex);
                    spanTitle.addClass("show").siblings().removeClass("show");
                    $(".side").animate({
                        left: width * this.realIndex
                    })
                },
            }
        });
        $(".tips li").click(function () {
           let index = $(this).index();
           mySwiper.slideToLoop(index);
        });
    })

 这里只需监听Swiper的slideChange()事件，即只要容器的内容发生变化，就触发相关的事件，从而达到联动的效果。这里的sider滚动过程是loop模式下，所以在获取Index的时候，获取的是realIndex，即loop模式的下的当前活动块索引，更多相关内容可以参考Swiper官方API文档，里面说得非常清楚。