先看效果：
示例一：
示例二：
具體示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper的切換</title> <link rel="stylesheet" href="css/swiper.min.css"> <script src="js/swiper.min.js"></script> <style type="text/css"> #certify{width:1280px; margin:0 auto; position:relative;} #certify .swiper-container{padding-bottom:60px} #certify .swiper-slide{width:350px;height:475px;background:#fff;box-shadow:0 8px 30px #ddd} #certify .swiper-slide img{display:block; width: 100%;} #certify .slideleft img{transform: perspective(1000px) rotateY(25deg); -webkit-transform: perspective(1000px) rotateY(25deg);} #certify .slideright img{transform: perspective(1000px) rotateY(-25deg); -webkit-transform: perspective(1000px) rotateY(-25deg);} #certify .swiper-slide-active img{transform: perspective(1000px) rotateY(0deg); -webkit-transform: perspective(1000px) rotateY(0deg);} #certify .swiper-button-prev{width: 25px; height: 50px; background-size: 60%; left: 0;} #certify .swiper-button-next{width: 25px; height: 50px; background-size: 60%; right: 0;} /**/ #certifys{width:1280px; margin:0 auto; position:relative;} #certifys .swiper-container{padding-bottom:60px} #certifys .swiper-slide{width:350px;height:475px;background:#fff;box-shadow:0 8px 30px #ddd} #certifys .swiper-slide img{display:block; width: 100%;} #certifys .swiper-slide-next img{transform: perspective(1000px) rotateY(25deg); -webkit-transform: perspective(1000px) rotateY(25deg);} #certifys .swiper-slide-prev img{transform: perspective(1000px) rotateY(-25deg); -webkit-transform: perspective(1000px) rotateY(-25deg);} #certifys .swiper-slide-active img{transform: perspective(1000px) rotateY(0deg); -webkit-transform: perspective(1000px) rotateY(0deg);} #certifys .swiper-button-prev{width: 25px; height: 50px; background-size: 60%; left: 0;} #certifys .swiper-button-next{width: 25px; height: 50px; background-size: 60%; right: 0;} </style> </head> <body> <div id="certify"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/111.jpg" /></div> <div class="swiper-slide"><img src="images/222.jpg" /></div> <div class="swiper-slide"><img src="images/333.jpg" /></div> <div class="swiper-slide"><img src="images/111.jpg" /></div> <div class="swiper-slide"><img src="images/111.jpg" /></div> <div class="swiper-slide"><img src="images/333.jpg" /></div> <div class="swiper-slide"><img src="images/222.jpg" /></div> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div id="certifys"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/111.jpg" /></div> <div class="swiper-slide"><img src="images/222.jpg" /></div> <div class="swiper-slide"><img src="images/333.jpg" /></div> <div class="swiper-slide"><img src="images/111.jpg" /></div> <div class="swiper-slide"><img src="images/111.jpg" /></div> <div class="swiper-slide"><img src="images/333.jpg" /></div> <div class="swiper-slide"><img src="images/222.jpg" /></div> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> var certifySwiper = new Swiper('#certify .swiper-container',{ watchSlidesProgress:true, slidesPerView:'auto', centeredSlides:true, loop:true, loopedSlides:7, autoplay:false, // autoplay:{ // delay: 2500, // disableOnInteraction: false // }, navigation:{ nextEl:'.swiper-button-next', prevEl:'.swiper-button-prev', }, pagination:{ el:'.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; modify = 1; translate = slideProgress * modify * 510 + 'px'; scale = 1 - Math.abs(slideProgress) / 7; zIndex = 999 - Math.abs(Math.round(10 * slideProgress)); slide.removeClass('slideleft'); slide.removeClass('slideright'); slide.addClass(slideProgress > 0 ? 'slideright' : 'slideleft'); 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); } } } }); </script> <script> var certifySwiper = new Swiper('#certifys .swiper-container',{ watchSlidesProgress:true, slidesPerView:'auto', centeredSlides:true, loop:true, loopedSlides:7, autoplay:false, // autoplay:{ // delay: 2500, // disableOnInteraction: false // }, navigation:{ nextEl:'.swiper-button-next', prevEl:'.swiper-button-prev', }, pagination:{ el:'.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; modify = 1; translate = slideProgress * modify * 510 + 'px'; scale = 1 - Math.abs(slideProgress) / 7; zIndex = 999 - Math.abs(Math.round(10 * slideProgress)); slide.removeClass('slideleft'); slide.removeClass('slideright'); slide.addClass(slideProgress > 0 ? 'slideright' : 'slideleft'); 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); } } } }); </script> </body> </html>
打完收工！