Question

我一直在尝试为我们心爱的滑键滑块创建一个自定义效果，我希望有人可能有一个想法来帮助我。你可以看到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
    }
});

Swiper滑块自定义过渡效果

1 个答案: