Пользовательский переходный эффект Swiper слайдера

Question

Я пытался добиться создания настраиваемого эффекта для нашего любимого слайдера Swiper, и я надеялся, что у кого-то может возникнуть идея помочь мне. Вы можете увидеть анимированный 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 
    } 
});