CODEWITHSUNDEEP
javascriptslidercss-transformsswiper.jshtml-framework-7
Nickolas Damofli
Nickolas Damofli

Reputation: 53

Swiper slider custom transition effect

I've been trying to achieve create a custom effect for our beloved swiper slider, and i was hoping someone might have an idea to help me. You can see the animated gif to see how it should be animation demo

Ideally the transition would be 3D (with perspective) 3d animation demo

I've been trying to achieve this using both the onProgress and setTranslate methods . I am trying to find the proper rotate3D and transform origin values.

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)'}) 
}
});

any help appreciated!

Upvotes: 1

Views: 4220

Answers (1)

css117
css117

Reputation: 31

I'm interested in custom transition too. But the one you're looking for already exists : 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
    }
});

Upvotes: 2

Related Questions