javascript - 如何给Swiper添加自定义幻灯片过渡效果？

Question

有没有什么好方法来实现一个添加自定义幻灯片过渡效果的Swiper插件？官方API没有这样的信息，并且在官方论坛上我的问题没有得到解答。我发现了一些过时的插件，但自从编写这些插件以来，Swiper 似乎发生了重大变化。

我想修改 coverflow 效果以实现各种行为，例如非线性幻灯片移动以及上一张和下一张幻灯片的不同移动。

inb4，我知道我可以简单地重写 Swiper 代码或编写自己的 slider ，但我希望能够保留此 slider 的所有功能，并能够在新版本发布后轻松更新它。

关于其他 js/jQuery slider 的答案，它允许轻松定制，支持触摸设备和硬件加速转换。我已经尝试过 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);

Demo and Source