异形轮播图

html部分：

 <div class="h-applica ptbT1">
              <div class="lists minWidthT1">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <a href="#">
                      <img src="images/zt-zfkfr/zfkfr_lb1.png" />
                      </a>
                    </div>	
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>	
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>	
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>	
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>	  
                     <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>	   
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zfkfr_lb1.png" />

                      </a>
                    </div>	   
                    <div class="swiper-slide">
                      <a href="#">
                        <img src="images/zt-zfkfr/zt-zsccz-img-1-2.jpg" />
                      </a>
                    </div>		
                 
                  </div>
                </div>
                <div class="swiper-button-prev aniview slow" av-animation="fadeInUp"></div>
                <div class="swiper-button-next aniview slow" av-animation="fadeInUp"></div>
              </div>
            </div>

css部分：（响应式需要结合js自己调）

 .minWidthT1 { width: 100%; margin: auto;}

      .h-applica {}

      .h-applica .lists { position: relative; }

      .h-applica .lists .swiper-container { height: 350px;margin: 0 165px;}

      .h-applica .swiper-slide { width: 800px; height: 350px; position: relative; text-align: center;}

      .h-applica .swiper-slide a{display: block;}

      /* .h-applica .swiper-slide.swiper-slide-active{width: 570px !important;} */

      .h-applica .swiper-slide.swiper-slide-active a { display: block; width: 100%; position: relative;z-index: 2; border-radius: 20px;}

      .h-applica .swiper-slide a:hover{opacity: 0.9;}

      .h-applica .swiper-slide img { width: 100%; height: 350px;border-radius: 20px;}

      .h-applica .swiper-slide:after { content: ""; position: absolute; border-radius: 20px;top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: .4; transition: .3s;}

      .h-applica .swiper-slide.swiper-slide-active:after { opacity: 0; }

      .h-applica .swiper-slide .txtT1 { height: 48px; line-height: 48px; padding: 0 20px; font-weight: 700; font-size: 16px; color: #fff; text-align: center; overflow: hidden; position: absolute; left: 0; bottom: 0; right:0; background: rgba(0,0,0,.5); overflow: hidden;}

      .h-applica .swiper-slide .moreT1 { display: none; margin-top: 50px;}

      .h-applica .swiper-slide.swiper-slide-active .moreT1 { display: inline-block;}

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

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

      .h-applica .swiper-button-prev,.h-applica .swiper-button-next {width: 63px; height: 138px; background-size: 62px; transform: translateY(-30%); }

js部分：

 var personsSwiper = new Swiper('.h-applica .swiper-container', {
	       loop: true,
         loopedSlides: 5,
        slidesPerView: 5, // 当展示的个数不一样时，调整这个
        spaceBetween:-418,// 然后，调整这个，让他保持最佳显示
        centeredSlides : true,
        watchSlidesProgress : true,
	      navigation: {
	        nextEl: '.h-applica .swiper-button-next',
	        prevEl: '.h-applica .swiper-button-prev',
	      },
        autoplay: {
				delay: 2500,
				disableOnInteraction: false,
			},
        breakpoints: { 
						//当宽度小于等于768时显示
						1200: {
							slidesPerView: 3,
							spaceBetween:-338
						},
						760: {
							slidesPerView: 1,
							spaceBetween: 418
						},
				},
        on: {
            setTranslate: function(){
            slides = this.slides
            for(i=0; i< slides.length; i++){
              
              slide = slides.eq(i)
              slideProgress = slides[i].progress
              modify = 1;
	            if (Math.abs(slideProgress) > 1) {
	              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
	            }
              scale = 1 - Math.abs(slideProgress) / 5.5; // 5.5调整缩放的比例
              slide.css({'opacity': '','background': ''});slide.transform('');//清除样式
              // slide.css('opacity',(1-Math.abs(slideProgress)/6));
              slide.transform('scale(' + scale + ')');
              zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.css('zIndex', zIndex);
              slide.css('opacity', 1);
                
              }	
          },
        // 固定写法
          setTransition: function(transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              slide.transition(transition);
            }
          },
          },
	    })