Is there any good way to implement a Swiper plugin which adds custom slide transition effects? Official API desn't have such information, and on official forum my question wasn't answered. I've found some outdated plugins, but it seems what Swiper was significantly changed since those plugins was written.

I want to modify coverflow effect to achieve various behaviour like non-linear slide movement and different movement of previous and next slides.

inb4, I know what I can simply rewrite Swiper code or write my own slider, but I want to be able to keep all features of this slider and be able to easily update it after new version release.

Answers about other js/jQuery sliders, which allows easy customisation, supports touch devices and hardware-accelerated transitions are also accepted. I've tried bxSlider already and found it less customizeable than Swiper.

Is there any good way to implement a Swiper plugin which adds custom slide transition effects? Official API desn't have such information, and on official forum my question wasn't answered. I've found some outdated plugins, but it seems what Swiper was significantly changed since those plugins was written.

I want to modify coverflow effect to achieve various behaviour like non-linear slide movement and different movement of previous and next slides.

inb4, I know what I can simply rewrite Swiper code or write my own slider, but I want to be able to keep all features of this slider and be able to easily update it after new version release.

Answers about other js/jQuery sliders, which allows easy customisation, supports touch devices and hardware-accelerated transitions are also accepted. I've tried bxSlider already and found it less customizeable than Swiper.

• javascript
• carousel
• transition
• swiper.js

1 Answer 1

Custom Slide Effect Transition for Swiper supported 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);

Demo and Source