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>