swiper相互切换

swiper切换后上面的也选中，tone点击下面也跟着切换。
上下相互滑动切换。

swiper：4.5.0

使用的是swiper【横向循环焦点图片展示】效果

代码：

<ul class="tone">
  <li class="active">公司新闻</li>
  <li class="">行业动态</li>
  <li class="">常见动态</li>
</ul>

<div id="certify" class="certify">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-active">公司新闻</div>
      <div class="swiper-slide">行业动态</div>
      <div class="swiper-slide">常见动态</div>
    </div>
  </div>
  <div class="spot"></div>
</div>

<script type="text/javascript">
certifySwiper = new Swiper('.certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loopedSlides: 5,
    loop: true,
    observer: true,
    observeParents: true,
    pagination: {
        el: '.certify .spot',
        //clickable :true,
    },
    navigation: {
        nextEl: '.certify .sNext',
        prevEl: '.certify .sPrev',
    },
    on: {
        progress: function(progress) {
            for(i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                modify = 1;
                if(Math.abs(slideProgress) > 1) {
                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                translate = slideProgress * modify * 200 + 'px';
                scale = 1 - Math.abs(slideProgress) / 5;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', zIndex);
                slide.css('opacity', 1);
                if(Math.abs(slideProgress) > 3) {
                    slide.css('opacity', 0);
                }
            }
        },
        setTransition: function(transition) {
            for(var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i)
                slide.transition(transition);
            }

        }
    }
});
</script>

自己修改样式

<div id="certify" class="certify">
            <div class="spot"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide-active">公司新闻</div>
                    <div class="swiper-slide">行业动态</div>
                    <div class="swiper-slide">常见动态</div>
                </div>
            </div>
        </div>
<script type="text/javascript">
            certifySwiper = new Swiper('.certify .swiper-container', {
                watchSlidesProgress: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                loopedSlides: 5,
                loop: true,
                observer: true,
                observeParents: true,
                pagination: {
                    el: '.certify .spot',
                    clickable: true,
                    renderBullet: function (index, className) {
                        var text = '';
                        switch (index) {
                            case 0:
                                text = '公司新闻';
                                break;
                            case 1:
                                text = '行业动态';
                                break;
                            case 2:
                                text = '常见动态';
                                break;
                        }
                        return '<span class="analyze_type ' + className + '">' + text + '</span>'
                    }
                },
                navigation: {
                    nextEl: '.certify .sNext',
                    prevEl: '.certify .sPrev',
                },
                on: {
                    progress: function(progress) {
                        for(i = 0; i < this.slides.length; i++) {
                            var slide = this.slides.eq(i);
                            var slideProgress = this.slides[i].progress;
                            modify = 1;
                            if(Math.abs(slideProgress) > 1) {
                                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                            }
                            translate = slideProgress * modify * 200 + 'px';
                            scale = 1 - Math.abs(slideProgress) / 5;
                            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                            slide.css('zIndex', zIndex);
                            slide.css('opacity', 1);
                            if(Math.abs(slideProgress) > 3) {
                                slide.css('opacity', 0);
                            }
                        }
                    },
                    setTransition: function(transition) {
                        for(var i = 0; i < this.slides.length; i++) {
                            var slide = this.slides.eq(i)
                            slide.transition(transition);
                        }
                    }
                }
            });
        </script>

<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/certify.css">
<style>
    .tone {
        margin: 0 auto;
        width: 50%;
        display: flex;
    }
    .tone li{
        width: 30%;
        list-style: none;
    }
    .tone li.active{
        background-color: aqua;
        text-align: center;
    }
</style>
<ul class="tone">
    <li class="active">公司新闻</li> 
    <li class="">行业动态</li>
    <li class="">常见动态</li>
</ul>
  
   
  
  <div id="certify" class="certify">
  
    <div class="swiper-container">
  
      <div class="swiper-wrapper">  
        <div class="swiper-slide swiper-slide-active"><img src="images/certify01.png" /><p>公司新闻</p></div>
        <div class="swiper-slide"><img src="images/certify02.png" /><p>行业动态</p></div>
        <div class="swiper-slide"><img src="images/certify03.png" /><p>常见动态</p></div>
  
      </div>
  
    </div>
  
    <div class="spot"></div>
  
  </div>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
   certifySwiper = new Swiper('.certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    autoplay: true,

on: {
    slideChange: function(){
        var index=this.activeIndex<6 ? this.activeIndex-3:0;
        $('.tone li').removeClass('active');
        $('.tone li').eq(index).addClass('active');
    },
    progress: function(progress) {

        for(i = 0; i < this.slides.length; i++) {

            var slide = this.slides.eq(i);

            var slideProgress = this.slides[i].progress;

            modify = 1;

            if(Math.abs(slideProgress) > 1) {

                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;

            }

            translate = slideProgress * modify * 200 + 'px';

            scale = 1 - Math.abs(slideProgress) / 5;

            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));

            slide.transform('translateX(' + translate + ') scale(' + scale + ')');

            slide.css('zIndex', zIndex);

            slide.css('opacity', 1);

            if(Math.abs(slideProgress) > 3) {

                slide.css('opacity', 0);

            }

        }

    },

    setTransition: function(transition) {

        for(var i = 0; i < this.slides.length; i++) {

            var slide = this.slides.eq(i)

            slide.transition(transition);

        }



    }

}

});
</script>

结果如下：