Swiperスライダーカスタムトランジション効果

Question

私は、私たちの最愛のswiperスライダーのためのカスタムエフェクトを作成達成しようとしてきた、と私は、誰かが私を助けるためにアイデアを持っているかもしれません期待していました。あなたは、私がonProgressとsetTranslate方法の両方を使用してこれを達成しようとしてきた、それは理想的遷移が（視点で）3D 3d animation demo

だろう animation demo

どうあるべきか確認するためにアニメーションGIFを見ることができます 。 私は適切な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 
    } 
});