Wie fügt man Swipe einen benutzerdefinierten Folienübergangseffekt hinzu?

Question

Gibt es eine gute Möglichkeit, ein Swiper-Plugin zu implementieren, das benutzerdefinierte Folienübergangseffekte hinzufügt? Offizielle API haben solche Informationen nicht, und im offiziellen Forum wurde meine Frage nicht beantwortet. Ich habe einige veraltete Plugins gefunden, aber es scheint, dass Swiper seit der Erstellung dieser Plugins erheblich verändert wurde.

Ich möchte Coverflow-Effekt zu ändern, um verschiedene Verhalten wie nichtlineare Schieberbewegung und unterschiedliche Bewegung von vorherigen und nächsten Folien zu erreichen.

Inb4, ich weiß, was ich Swiper Code einfach umschreiben oder meinen eigenen Slider schreiben kann, aber ich möchte in der Lage sein, alle Funktionen dieses Schiebereglers zu behalten und in der Lage zu sein, es nach der neuen Version zu aktualisieren.

Antworten auf andere js/jQuery-Schieberegler, die eine einfache Anpassung ermöglicht, unterstützt Touch-Geräte und Hardware-beschleunigte Übergänge werden ebenfalls akzeptiert. Ich habe bxSlider bereits ausprobiert und fand es weniger anpassbar als Swiper.

Answer 1

Benutzerdefinierte Slide Effect Transition für swiper Touch ...

var interleaveOffset = -.5; 

var interleaveEffect = { 

    onProgress: function(swiper, progress){ 
    for (var i = 0; i < swiper.slides.length; i++){ 
     var slide = swiper.slides[i]; 
     var translate, innerTranslate; 
     progress = slide.progress; 

     if (progress > 0) { 
     translate = progress * swiper.width; 
     innerTranslate = translate * interleaveOffset;   
     } 
     else {   
     innerTranslate = Math.abs(progress * swiper.width) * interleaveOffset; 
     translate = 0; 
     } 

     $(slide).css({ 
     transform: 'translate3d(' + translate + 'px,0,0)' 
     }); 

     $(slide).find('.slide-inner').css({ 
     transform: 'translate3d(' + innerTranslate + 'px,0,0)' 
     }); 
    } 
    }, 

    onTouchStart: function(swiper){ 
    for (var i = 0; i < swiper.slides.length; i++){ 
     $(swiper.slides[i]).css({ transition: '' }); 
    } 
    }, 

    onSetTransition: function(swiper, speed) { 
    for (var i = 0; i < swiper.slides.length; i++){ 
     $(swiper.slides[i]) 
     .find('.slide-inner') 
     .andSelf() 
     .css({ transition: speed + 'ms' }); 
    } 
    } 
}; 

var swiperOptions = { 
    loop: true, 
    speed: 1000, 
    grabCursor: true, 
    watchSlidesProgress: true, 
    mousewheelControl: true 
}; 

swiperOptions = $.extend(swiperOptions, interleaveEffect); 

var swiper = new Swiper('.swiper-container', swiperOptions); 

unterstützt

Demo and Source