天天看点

【swiper】3D轮播效果调整

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 * 200 + 'px';
                            scale = 1 - Math.abs(slideProgress) / 3;
                            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                            rotateY = slideProgress * modify* 102 + 'deg'
                            slide.transform('translateX(' + translate + ') scale(' + scale + ') rotateY('+ rotateY +')');
                            slide.css('zIndex', zIndex);
                        }
                    },
                    setTransition: function(transition) {
                        for (var i = 0; i < this.slides.length; i++) {
                            var slide = this.slides.eq(i)
                            slide.transition(transition);
                        }
                    }
                }
            });