Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom slides transform #1497

Closed
tobiasMitt opened this issue Nov 15, 2015 · 5 comments

Comments

@tobiasMitt
Copy link

commented Nov 15, 2015

Hi, thank you for such great slider, is there a way to use swiper 2.x custom transition effects (with old progress plugin) on swiper 3.x?
I see that progress plugin is embed in new swiper, but documentation isn't helping a lot for migrating effects to the new API.

Eg. I'm trying to use this effect contained in https://github.com/nolimits4web/Swiper-Smooth-Progress/blob/master/demos/demo-inverse-cover.html

var mySwiper = new Swiper('.swiper-container',{
      progress:true,
      onProgressChange: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var translate, boxShadow;
          if (progress>0) {
            translate = progress*swiper.width;  
            boxShadowOpacity = 0;
          }
          else {
            translate=0; 
            boxShadowOpacity = 1  - Math.min(Math.abs(progress),1);
          }
          slide.style.boxShadow='0px 0px 10px rgba(0,0,0,'+boxShadowOpacity+')';
          swiper.setTransform(slide,'translate3d('+(translate)+'px,0,0)');
        }
      },
      onTouchStart:function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], 0);
        }
      },
      onSetWrapperTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], speed);
        }
      }
    })
    // Set Z-Indexes
    for (var i = 0; i < mySwiper.slides.length; i++){
      mySwiper.slides[i].style.zIndex = i;
    }

how to get it ported to swiper 3.x?

@tobiasMitt tobiasMitt changed the title Custom slide transforms Custom slides transform Nov 15, 2015

@tobiasMitt

This comment has been minimized.

Copy link
Author

commented Nov 18, 2015

Sorry for upping again this issue, just need to know if custom transition effects can be coded with swiper 3.x API or if, for this purpose, it's better to downgrade to swiper 2.x.
I imagine that they can be added in a similar way by tweaking swiper 3.x core code, but currently I haven't a deep knowledge on how its whole code works.
Any hints, samples or guidelines are super appreciated :)

@nolimits4web

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2015

Yes, they can be coded but manually. Look at how effects realised in Swiper 3 https://github.com/nolimits4web/Swiper/blob/master/src/js/effects.js, so basically you may use same callbacks.

Or you can port the same code, just look in docs for relevant parameters/callbacks/methods, for example:
onProgressChange -> onProgress
onSetWrapperTransition -> onSetTransition

And there is no setTransition and setTransform methods, you need to set it using CSS/styles property of required elements

@tobiasMitt

This comment has been minimized.

Copy link
Author

commented Nov 20, 2015

hi @nolimits4web thanks for the reply!

I tried to port to the new API, but the effects aren't working as expected, is this the correct way to set transition in swiper callback?:

           var mySwiper = new Swiper('.swiper-container', {
               watchSlidesProgress:true,
                onProgress: function(swiper, progress){
                    for (var i = 0; i < swiper.slides.length; i++){
                        var slide = swiper.slides[i];
                        var translate, boxShadow, boxShadowOpacity;
                        if (progress>0) {
                            translate = progress*swiper.width;
                            boxShadowOpacity = 0;
                        }
                        else {
                            translate = 0;
                            boxShadowOpacity = 1  - Math.min(Math.abs(progress),1);
                        }
                        $(slide).css({ boxShadow: '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')',
                                       transform: 'translate3d(translate + 'px,0,0)' });
                    }
                },
                onTouchStart: function(swiper){
                    for (var i = 0; i < swiper.slides.length; i++){
                        $(swiper.slides[i]).css({ transition: 'none' });
                    }
                },
                onSetTransition: function(swiper, speed) {
                    for (var i = 0; i < swiper.slides.length; i++){
                        $(swiper.slides[i]).css({ transition: 'all ' + speed + 'ms linear' });
                    } 
                }
           })
          // Set Z-Indexes
          for (var i = 0; i < mySwiper.slides.length; i++){
              mySwiper.slides[i].style.zIndex = i;
          }
@nolimits4web

This comment has been minimized.

Copy link
Owner

commented Nov 21, 2015

Ok, the progress itself is a bit different, you need to use slide's progress. Here is working example:

var swiper = new Swiper('.swiper-container', {
    watchSlidesProgress:true,
    onProgress: function(swiper, progress){
        for (var i = 0; i < swiper.slides.length; i++){
            var slide = swiper.slides[i];
            var translate, boxShadow, boxShadowOpacity;
            progress = slide.progress;
            if (progress > 0) {
                translate = progress * swiper.width;
                boxShadowOpacity = 0;
            }
            else {
                translate = 0;
                boxShadowOpacity = 1  - Math.min(Math.abs(progress),1);
            }
            $(slide).css({
                boxShadow: '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')',
                transform: 'translate3d(' + translate + '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]).css({ transition: speed + 'ms' });
        }
    }
});
@lock

This comment has been minimized.

Copy link

commented Jun 26, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot added the outdated label Jun 26, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Jun 26, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants
You can’t perform that action at this time.