如何在Swiper中添加自定義幻燈片過渡效果？

Question

有什么好的方法可以實現添加自定義幻燈片過渡效果的Swiper插件嗎？ 官方API沒有此類信息，在官方論壇上也沒有回答我的問題。 我發現了一些過時的插件，但是自從編寫這些插件以來，Swiper似乎發生了很大的變化。

我想修改Coverflow效果以實現各種行為，例如非線性幻燈片移動以及上一張和下一張幻燈片的不同移動。

在inb4中，我知道我可以簡單地重寫Swiper代碼或編寫自己的滑塊，但是我希望能夠保留此滑塊的所有功能，並能夠在新版本發布后輕松對其進行更新。

也可以接受有關其他js / jQuery滑塊的答案，這些滑塊允許輕松自定義，支持觸摸設備和硬件加速的轉換。 我已經嘗試過bxSlider，發現它的可定制性比Swiper小。

Answer 1

自定義滑動效果過渡，支持Swiper支持的觸摸...

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

演示和來源