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一些改动就能做出想要的效果