swiper.js实现区域轮播-两边小中间大的缓动效果

                                                                                     效果展示（已加速）

---

第一步：在页面引入css和js

<link rel="stylesheet" href="css/swiper.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>

第二步：页面HTML

<div class="scroll_part" id="certify">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/example1.png"/></div>
            <div class="swiper-slide"><img src="images/example2.png"/></div>
            <div class="swiper-slide"><img src="images/example3.png"/></div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

第三步：页面CSS

#certify{ position: relative; width: 990px; margin: 0 auto}

.swiper-button-next,.swiper-button-prev{ margin-top: -18px}

#certify .swiper-slide { width: 607px;	height: 325px;	position: relative; opacity: 0.5 !important;}

#certify .swiper-slide:before{ position: absolute; top: 0; left: 0; width: 100%; height: 337px; content: '';border-radius: 15px; background-color: rgba(0,0,0,.4); }

#certify .swiper-slide-active:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0,0,0,0)}

#certify  .swiper-slide img{ display:block; width: 100%; border-radius: 15px;}

#certify .swiper-pagination{ width: 100%; bottom: 20px;}

#certify .swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 5px; border: 3px solid #fff; background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1;}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active{ border: 3px solid #00aadc; background-color: #fff;}

#certify .swiper-button-prev{ outline: none; left: 0; width: 25px; height: 33px; background: url(../images/arrow-left.png) no-repeat; background-position: 0 0; background-size: 100%;}

#certify .swiper-button-prev:hover{ background-position: 0 0; background-size: 100%}

#certify .swiper-button-next{ outline: none; right: 0; width: 25px; height: 33px; background: url(../images/arrow-right.png) no-repeat; background-position: 0 0; background-size: 100%;}

#certify .swiper-button-next:hover{ background-position: 0 0; background-size: 100%}
.swiper-button-next::after, .swiper-button-prev::after{ content: ''}

#certify .swiper-slide-active{ position: relative; padding: 47px 97px 0; opacity: 1!important;}

#certify .swiper-slide-active:before{ width: 607px; height: 325px; background: url("../images/phone-bg-ph@3x.png") no-repeat; background-size: 100%; z-index: 100}

#certify .swiper-slide-active img{ margin-top: 0}

@media (max-width:900px){/*屏幕尺寸按自己实际的来*/
    #certify{ width: 100%}
    #certify .swiper-slide{ width: 6.94rem; height: 4.2rem; opacity: 0 !important;}
    #certify .swiper-slide-active{ padding: 0.55rem 0.7rem; margin-top: 0.3rem;opacity: 1 !important;}
    #certify .swiper-slide-active:before{ width: 7.94rem; height: 4.5rem; left: 50%; margin-left: -3.97rem; background-size: 100%}
    #certify .swiper-button-prev,#certify .swiper-button-next{ width: .29rem; height: .37rem; background-size: 100%; margin-top: -0.08rem}
    #certify .swiper-button-prev{ left: 0.5rem; right: auto}
    #certify .swiper-button-next{ right: 0.5rem}

}

第四步：JS

certifySwiper = new Swiper('#certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 3,
        autoplay: false,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            //el: '.swiper-pagination',
            //clickable :true,
        },
        on: {
            progress: function(progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    translate = slideProgress * modify * 400 + 'px'; //400是translateX的大小
                    console.log(slideProgress+"::"+translate)
                    scale = 1 - Math.abs(slideProgress) / 3;
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 3) {
                        slide.css('opacity', 0);
                    }
                }
            },
            setTransition: function(transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        }

    });

---

至此轮播已实现，如果轮播上还有文字，可以直接用html+css实现。