JQuery 自适应3D轮播图制作方法（附代码）

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="https://www.jq22.com/demo/swiperlbt201810230049/js/swiper.min.js"></script>

<div id="certify">

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="images/certify01.png" /><p>Picture information 1</p></div>

<div class="swiper-slide"><img src="images/certify02.png" /><p>Picture information 2</p></div>

<div class="swiper-slide"><img src="images/certify03.png" /><p>Picture information 3</p></div>

<div class="swiper-slide"><img src="images/certify04.png" /><p>Picture information 4</p></div>

<div class="swiper-slide"><img src="images/certify05.png" /><p>Picture information 5</p></div>

</div>

</div>

<div class="swiper-pagination"></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,autoplay:true,

loopedSlides: 5,

autoplay: true,

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 * 260 + '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);

}

}

}

})

</script>