javascript - Swiper slider 自定义过渡效果

Question

我一直在尝试为我们心爱的滑动 slider 创建自定义效果，我希望有人能有一个想法来帮助我。 您可以查看 gif 动画来了解它应该是什么样子 animation demo

理想情况下，过渡是 3D(带有透视) 3d animation demo

我一直在尝试使用 onProgress 和 setTranslate 方法来实现此目的。 我正在尝试找到正确的rotate3D 和变换原点值。

mySwiper.on('onProgress', function (s,progress) {
for (var a = 0; a < s.slides.length; a++) {
var slide = s.slides[a];
var slideProgress = slide.progress;

 if (slideProgress < 0) {
   var slideRotation = 90-(slideProgress *90);
   var slideOrigin= (100+(slideProgress*100));
 } else {
   var slideRotation = 90-(slideProgress *90);
   var slideOrigin= (100+(slideProgress*100))*-1;
 }
  slideOrigin=0; 

 $(slide).css({transform:'rotateY('+slideRotation+'deg)'}) 
}
});

感谢任何帮助!

Answer 1

我对自定义转换也很感兴趣。 但您要找的那个已经存在: https://github.com/nolimits4web/Swiper/blob/master/demos/17-effect-cube.html

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    effect: 'cube',
    grabCursor: true,
    cube: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94
    }
});