SOURCE

$(function () {

	// swiper 示例，没用到可以不拷贝
    var swiper = new Swiper('.banner .swiper-container', {
        pagination: {
            el: '.banner .swiper-pagination'
        },
        loop: true,
        autoplay: true
    });

    // slick 示例，没用到可以不拷贝
    $('.slick-container').slick({
        arrows: false,
        autoplay: true,
        dots: true
    });

	// swiper 层叠轮播示例，没用到可以不拷贝
    var modify = 0;
    var certifySwiper = new Swiper('.m-slide-certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        autoplay: true,
        navigation: {
            nextEl: '.m-slide-certify .swiper-button-next',
            prevEl: '.m-slide-certify .swiper-button-prev',
        },
        pagination: {
            el: '.m-slide-certify .swiper-pagination'
        },
        on: {
            progress: function(progress) {
                for (i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;

                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
                    }
                    translate = slideProgress * modify * 100 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 5;
                    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);
                }
            }
        }
    });

});

<!-- 1. swiper 轮播演示 -->
<div class="banner">
    <div class="swiper-container">

        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="pic" />
            </div>
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="pic" />
            </div>
        </div>

        <div class="swiper-pagination"></div>

    </div>
</div>



<!-- 2. slick 轮播演示 -->
<div class="banner">
    <div class="slick-container">

        <div class="slick-slide">
            <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="pic" />
        </div>
        <div class="slick-slide">
            <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" class="pic" />
        </div>

    </div>
</div>



<!-- 3. swiper 层叠轮播演示 -->
<div class="m-slide-certify">
    <div class="swiper-container">

        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" />
            </div>
            <div class="swiper-slide">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg" alt="" />
            </div>
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
</div>

/* 轮播，默认按比例占位 */
.banner { overflow: hidden; position: relative; padding-top: 15%; background: #fff; }

    /* swiper，没用到可以不拷贝 */
    .banner .swiper-container { position: absolute; top: 0; width: 100%; height: 100%; }
        .banner .swiper-slide .pic { display: block; width: 100%; }

    /* slick，没用到可以不拷贝 */
    .banner .slick-container { position: absolute; top: 0; width: 100%; height: 100%; }
        .banner .slick-slide .pic { display: block; width: 100%; }
        .banner .slick-dots { position: absolute; bottom: 10px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
            .banner .slick-dots li { overflow: hidden; display: inline-block; margin: 0 4px; width: 8px; height: 8px; background: rgba(0, 0, 0, .2); -webkit-border-radius: 100% 100%; border-radius: 100% 100%; }
            .banner .slick-dots li.slick-active { background-color: #007aff; }
                .banner .slick-dots li button { display: none; }

/* swiper 层叠轮播，没用到可以不拷贝 */
.m-slide-certify { overflow: hidden; position: relative; margin: 30px auto; width: 320px; height: 140px; }
    .m-slide-certify .swiper-container { padding-bottom: 40px; }
        .m-slide-certify  .swiper-slide { padding: 2px; width: 180px; height: 100px; background: #fff; border: 1px solid #c2c2c2; }
            .m-slide-certify  .swiper-slide img { display: block; width: 100%; height: 100%; }

        .m-slide-certify .swiper-pagination { width: 100%; bottom: 10px; }
            .m-slide-certify .swiper-pagination-bullets .swiper-pagination-bullet { opacity: 1; margin: 0 5px; width: 5px; height: 5px; border: 2px solid #fff; background-color: #d5d5d5; }
                .m-slide-certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border-color: #00aadc; background-color: #fff; }

        .m-slide-certify .swiper-button-prev, .m-slide-certify .swiper-button-next { top: 55px; width: 20px; height: 40px; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
        .m-slide-certify .swiper-button-prev { left: 75px; background-image: url(http://pic.celong.cn/15235318388.png); }
            .m-slide-certify .swiper-button-prev:hover {}
        .m-slide-certify .swiper-button-next { right: 75px; background-image: url(http://pic.celong.cn/152353183810.png); }
            .m-slide-certify .swiper-button-next:hover {}