swiper实现层叠轮播图

先来两张示例图吧：

以上呢就是示意图了；

具体代码看下面吧

1.首先： swiper的结构：

<div class='swiper-container'>
　　<div class='swiper-wrapper'>
　　　　<div class='swiper-slide'>

　　　　</div>
　　</div>
</div>

这些肯定都知道，还是拿出来能实现上面效果图的代码吧

//引入swiper的css样式，以下为个人路径
    <link rel="stylesheet" type="text/css" href="swiper/css/swiper.min.css" />

css样式：

/*展示区域*/
.ours-main {
    width: 100%;
    height: 28rem;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.ours-swiper {
    height: 100%;
    width: 49.8%;
}
/*自定义swiper样式*/
.swiper-container {
                position: relative;
                width: 100%;
                height: 100%;
            }
            .swiper-wrapper{
                width: 100%;
                height: 100%;
            }
            .swiper-slide {
                text-align: center;
                height: 86%;
                background: #CCCDCE;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 300ms;
                transform: scale(0.8);
            }
            
            .swiper-slide-active,
            .swiper-slide-duplicate-active {
                transform: scale(1);
            }
            .swiper-button-next,
            .swiper-button-prev{
                display: none;
            }
            .swiper-slide-active{
                z-index: 999 !important;
            }
            .swiper-slide-prev .s-right{
                display: none;
            }
            .swiper-slide-prev .s-left{
                margin-left: 35%;
            }
            .swiper-slide-prev {
                background-color: #fff;
            }
            .swiper-slide-next{
                background-color: #fff
            }
/*要展示的div左侧样式*/
.s-left{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s-l-block{
    width: 92.2%;
    height: 85%;
}
.s-l-block img{
    width: 100%;
    height: 100%;
}
/*要展示div的右侧样式*/
.s-right{
    width: 45%;
    height: 100%;
}
.s-r-title{
        margin-top: 2rem;
        margin-right: 10%;
        font-size: 2rem;
        color: #676769;
        font-weight: 500;
}
.s-r-span{
        margin-top: 1rem;
        width: 100%;
}
.s-r-span span{
        color: #676769;
        font-size: 1.2rem;
        line-height: 2.5rem;
 }

HTML代码：

 先看个图（图下面给代码----有点长，修改img路径就可以使用咯）：

<div class="ours-main">
    <div class="ours-swiper">
       <div class="swiper-container">
           <div class="swiper-wrapper">
                    <div class="swiper-slide">
                          <div class="s-left">
                              <div class="s-l-block">
                                 <img src="img/foreign/center.png" />
                               </div>
                          </div>
                          <div class="s-right">
                              <div class="s-r-title">
                                  <span>外教abcd</span>
                               </div>
                               <div class="s-r-span">
                                  <span> Morbi sed mi luctus,temporarcu nec, hendrerit purus Proin non nibh id elit vulputateultrices. Integer finibus tinci dunt leo, eu vulputate nunc.Praesent elit massa, mollis eu magna acMorbi sed mi luctus, temporarcu nec, hendrerit purus Proin
                                  </span>
                               </div>
                          </div>
                    </div>
                    <div class="swiper-slide">
                           <div class="s-left">
                               <div class="s-l-block">
                                  <img src="img/foreign/center2.png" />
                               </div>
                           </div>
                           <div class="s-right">
                               <div class="s-r-title">
                                   <span>外教abcd</span>
                               </div>
                               <div class="s-r-span">
                                   <span> Morbi sed mi luctus,temporarcu nec, hendrerit purus Proin non nibh id elit vulputateultrices. Integer finibus tinci dunt leo, eu vulputate nunc.Praesent elit massa, mollis eu magna acMorbi sed mi luctus, temporarcu nec, hendrerit purus Proin
                                   </span>
                               </div>
                          </div>
                    </div>
                    <div class="swiper-slide">
                            <div class="s-left">
                                <div class="s-l-block">
                                   <img src="img/foreign/center3.png" />
                                </div>
                          　</div>
                            <div class="s-right">
                                <div class="s-r-title">
                                    <span>外教abcd</span>
                                 </div>
                                 <div class="s-r-span">
                                     <span> Morbi sed mi luctus,temporarcu nec, hendrerit purus Proin non nibh id elit vulputateultrices. Integer finibus tinci dunt leo, eu vulputate nunc.Praesent elit massa, mollis eu magna acMorbi sed mi luctus, temporarcu nec, hendrerit purus Proin
                           　　　　　　</span>
                                 </div>
                            </div>
                    </div>
                    <div class="swiper-slide">
                           <div class="s-left">
                               <div class="s-l-block">
                                   <img src="img/foreign/center4.png" />
                               </div>
                           </div>
                           <div class="s-right">
                               <div class="s-r-title">
                                   <span>外教abcd</span>
                               </div>
                           　　 <div class="s-r-span">
                                   <span> Morbi sed mi luctus,temporarcu nec, hendrerit purus Proin non nibh id elit vulputateultrices. Integer finibus tinci dunt leo, eu vulputate nunc.Praesent elit massa, mollis eu magna acMorbi sed mi luctus, temporarcu nec, hendrerit purus Proin
                           　　　　 </span>
                            　　</div>
                  　　　　　 </div>
                    </div>
                    <div class="swiper-slide">
                           <div class="s-left">
                               <div class="s-l-block">
                                   <img src="img/foreign/center5.png" />
                               </div>
                           </div>
                           <div class="s-right">
                               <div class="s-r-title">
                                   <span>外教abcd</span>
                               </div>
                               <div class="s-r-span">
                                   <span> Morbi sed mi luctus,temporarcu nec, hendrerit purus Proin non nibh id elit vulputateultrices. Integer finibus tinci dunt leo, eu vulputate nunc.Praesent elit massa, mollis eu magna acMorbi sed mi luctus, temporarcu nec, hendrerit purus Proin
                                   </span>
                               </div>
                            </div>
                     </div>
          </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button-black"></div>
                            <div class="swiper-button-prev swiper-button-black"></div>
                        </div>
                    </div>
                </div>

js代码：

   　　 <!--引入jquery.js-->
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <!--引入wow的js-->
        <script type="text/javascript" src="css/WOW-master/dist/wow.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
                slidesPerView: 1.5, //设置slider容器能够同时显示的slides数量(carousel模式)。
                spaceBetween: -180, //在slide之间设置距离（单位px）。
                centeredSlides: true, //设置活动块居中
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    stopOnLastSlide: true,
                    delay: 5000
                },
            });
            $('.swiper-container').mouseenter(function() {
                $('.swiper-button-next').css('display', 'block')
                $('.swiper-button-prev').css('display', 'block')

            }).mouseleave(function() {
                $('.swiper-button-next').css('display', 'none')
                $('.swiper-button-prev').css('display', 'none')
            })
</script>