swiper4的輪播圖效果

第一種：

這種輪播圖效果感覺最近很流行，swiper官網示例上沒有這種形式的，得自己根據差不多樣式的去改！

不多說上代碼：

html:

<div class="swiper-container one">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-slides swiper-slides-one">
                            <div class="pp_list">
                                <img src="http://join.fieldedu.cn/jiameng/images/s1.jpg" class="pp_pics" />
                                <div class="pp_li">
                                    <span class="pp_num">01</span>
                                    <span class="pp_cont">與美國紐約百年私立名校建立合作關系，引進其先進的美式教育理念和教學體系。</span>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slides swiper-slides-one">
                            <div class="pp_list">
                                <img src="http://join.fieldedu.cn/jiameng/images/s2.jpg" class="pp_pics" />
                                <div class="pp_li">
                                    <span class="pp_num">02</span>
                                    <span class="pp_cont">融合常青藤名校預備聯盟教學課程體系，致力於培養兒童的21世紀綜合素質。</span>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slides swiper-slides-one">
                            <div class="pp_list">
                                <img src="http://join.fieldedu.cn/jiameng/images/s3.jpg" class="pp_pics" />
                                <div class="pp_li">
                                    <span class="pp_num">03</span>
                                    <span class="pp_cont">與美國私立名校共同成立中美專家團隊，進行完整的課程規划及課件研發。</span>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slides swiper-slides-one">
                            <div class="pp_list">
                                <img src="http://join.fieldedu.cn/jiameng/images/s4.jpg" class="pp_pics" />
                                <div class="pp_li">
                                    <span class="pp_num">04</span>
                                    <span class="pp_cont">邀請該校小學部校長Rosemarie Buzzeo一行到中國正式訪問交流。</span>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slides swiper-slides-one">
                            <div class="pp_list">
                                <img src="http://join.fieldedu.cn/jiameng/images/s5.jpg" class="pp_pics" />
                                <div class="pp_li">
                                    <span class="pp_num">05</span>
                                    <span class="pp_cont">美國教育名家聯袂推薦具有150年歷史的西式精英教育，培養獨立的思考者。</span>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slides swiper-slides-one">
                            <div class="pp_list">
                                <img src="http://join.fieldedu.cn/jiameng/images/s6.jpg" class="pp_pics" />
                                <div class="pp_li">
                                    <span class="pp_num">06</span>
                                    <span class="pp_cont">遵循世界著名教育家約翰·杜威教育理論研究成果，提倡從兒童的天性出發，促進兒童的個性發展。</span>
                                </div>
                            </div>
                        </div>
                    </div>

js:(js中最重要的是     slidesPerView  這個屬性，這是swiper中用來一屏展示多少的，可以用小數，看看你自己的那塊元素的寬度是多少，根據這個參數來計算一下差不多的就可以了 )

loopAdditionalSlides : 3,這個參數一定要加，要不然你設置無縫滾動的時候會有bug

var swiper1 = new Swiper('.one', {
            loop: true,
            slidesPerView: 1.38,
            loopAdditionalSlides : 3,
            spaceBetween: 12,
            centeredSlides: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

 

第二種：

 

不廢話上代碼：

html：重要的一點是給第一個加了一個margin-left：-60px；是第一種的一個變形  

重要提示，不要設置無縫滾動會有問題（現在還沒解決，希望大家有更好的方法一起分享）

<div class="swiper-container two">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slides swiper-slides-two" style="margin-left:-60px ;">
                        <div class="zc_list">
                            <img src="img/zc001.png" class="zc_pics" />
                            <div class="zc_li">
                                <p class="zc_tit">校區<b>籌備期</b></p>
                                <p class="zc_conts">校區選址及裝修設計<br/>人員招聘及團隊培訓<br/>校區運營經驗分享</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slides swiper-slides-two">
                        <div class="zc_list">
                            <img src="img/zc002.png" class="zc_pics" />
                            <div class="zc_li">
                                <p class="zc_tit">校區<b>開業期</b></p>
                                <p class="zc_conts">開業倒計時市場規划<br/>專屬運營督導入校<br/>品牌宣傳資源同步</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slides swiper-slides-two">
                        <div class="zc_list">
                            <img src="img/zc003.png" class="zc_pics" />
                            <div class="zc_li" style="padding-right: 0.6rem;">
                                <p class="zc_tit">校區<b>運營期</b></p>
                                <p class="zc_conts">線上管理系統<br/>團隊提升培訓<br/>年度校長論壇</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

 

js：

var swiper2 = new Swiper('.two', {
            autoplay:true,
            slidesPerView: 1.75,
            spaceBetween: 10,
            centeredSlides: true,
        });

css：這塊的css要設置一下

.swiper-slides-one{
    background: none !important;
}
.swiper-slides {
  text-align: center;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  -webkit-transition: transform 300ms;
  -moz-transition: transform 300ms;
  -ms-transition: transform 300ms;
  -o-transition: transform 300ms;
  border-radius: 0.09rem;
  
}
.two .swiper-slides{
  -webkit-transform:scale(0.8) !important;
  transform: scale(0.8) !important;
}
.two .swiper-wrapper .swiper-slide-active{
  -webkit-transform:scale(1) !important;
  transform: scale(1) !important;
}

 

tips：以上是我做過的兩種輪播圖的變形，總結來說，控制好swiper里面內置的參數的和css一些改動就能做出想要的效果