jquery+swiper实现三图轮播效果

需求为了实现如图所示的轮播图效果：

效果图
参考插件：swiper中文网
html代码:

<div class="swiper-container" id="investproSwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="investpro">
                <img src="imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="investpro">
                <img src="imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="investpro">
                <img src="imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="investpro">
                <img src="imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="investpro">
                <img src="imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="investpro">
                <img src="imgs/3.jpg" alt="">
            </div>
        </div>
    </div>
</div>

css代码：

<style>
    .swiper-container{height:8.2rem;}
    #investproSwiper{margin-top: 0.52rem;}
    #investproSwiper .swiper-slide{width:5rem;height:7.25rem;}
    #investproSwiper .swiper-slide .investpro{width:4.61rem;height:6.37rem;background-size: 100% 100%;background-repeat: no-repeat;margin-top: 0.58rem;margin-left: 0.19rem;-webkit-transition: all 0.5s linear;}
    #investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}
    .investpro img{
        width:100%;
        height:100%;
    }
</style>

js代码：

<script>
    var abcSwiper = new Swiper("#investproSwiper", {
        slidesPerView: 'auto',   //设置slider容器能够同时显示的slides数量
        centeredSlides: true,    //设定为true时，活动块会居中，而不是默认状态下的居左。
        speed: 500,
    });
</script>

实现demo下载