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

Demo and Source

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

1 个答案: