javascript - How to add custom slide transition effect to Swiper? - Stack Overflow

admin管理员组

文章数量:1389903

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

Share Improve this question Follow asked May 25, 2016 at 9:13 Denis SheremetDenis Sheremet 2,59322 gold badges2121 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： javascriptHow to add custom slide transition effect to SwiperStack Overflow