swiper4 轮播（心形）

<link rel="stylesheet" href="__CDN__/assets/static/css/swiper4.min.css">
<div id="certify" class="certify marginB_20 w_1200">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {notempty name="data.data"}
            {foreach name="data.data" item="vo"}
            <div class="swiper-slide">
                <div class="shadow slide_box">
                    <img src="{$vo.img}" class="fadeInUp wow" data-wow-delay="0.1s"/>
                    <div class="info fadeInUp wow" data-wow-delay="0.2s">
                        <p class="title text-overflow-1 marginB_10">{$vo.title|default=''}</p>
                        <p>{$vo.intro|default=''}</p>
                    </div>
                </div>
            </div>
            {/foreach}
            {/notempty}
        </div>
    </div>
</div>
<script src="__CDN__/assets/static/js/swiper4.min.js"></script>
<script>
    certifySwiper = new Swiper('#certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        // autoplay: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        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.5 + 1;
                    }
                    translate = slideProgress * modify * 82 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 5;
                    translateY = -(Math.abs(slideProgress) * 70) + 'px';
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') translateY(' + translateY + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 2) {  //只能大于2就隐藏，否则可视区域会展示7张图片，实际上5张集即可
                        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);
                }

            }
        }

    })
</script>