Swiper.js, debounce or callback?

JavaScript
1

Hi, I am trying out swiper.js, which seems to be an awesome slider, probs the best ive tried so far.
I am trying to customize it, and using callback functions to do more complex animations between slides. Works great so far, however, I am yet to see if there is any callback or debounce method I can use so that slide changes isn’t done in rapid fashion, but instead i want the animation timeline to finish before the user is able to change slide.

Here is the swiper.js API: http://idangero.us/swiper/api/#.V9OvrpN97_Q

And here is my current code:

const tlOut = new TimelineLite()
const tlIn = new TimelineLite()

const mySwiper = new Swiper ('.swiper-container', {
	direction: 'vertical',
	speed: 0,
	virtualTranslate: true,
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev',
	pagination: '.swiper-pagination',
	paginationType: 'bullets',
	paginationHide: false,
	paginationClickable: true,
	mousewheelControl: true,
	onSlideChangeStart: function(swiper) {

    	const slideOut = document.querySelectorAll('.swiper-slide')[mySwiper.previousIndex]
    	const upOut = slideOut.querySelectorAll('.js-up')
    	const imgOut = slideOut.querySelectorAll('.js-img-wrapper')

    	tlOut
    		.staggerTo(imgOut, 1.5, { yPercent: -100, ease: Power4.easeInOut }, 0.1)
    		.staggerTo(upOut, 1, { yPercent: -100, ease: Expo.easeInOut }, 0.1, "-=1.5")
    		.set(slideOut, { autoAlpha: 0 })
    		.set(upOut, { clearProps: "all" })
    		.set(imgOut, { clearProps: "yPercent, alpha" })

		const slideIn = document.querySelectorAll('.swiper-slide')[mySwiper.activeIndex]
		const upIn = slideIn.querySelectorAll('.js-up')
		const imgIn = slideIn.querySelectorAll('.js-img-wrapper')

    	tlIn
    		.set(slideIn, { autoAlpha: 1 })
    		.staggerFrom(imgIn, 1.5, { yPercent: 100, ease: Power4.easeInOut, delay: 1 }, -0.1)
    		.staggerFrom(upIn, 1, { yPercent: 100, ease: Expo.easeInOut }, -0.1, "-=1.5")
    		.set(upIn, { clearProps: "all" })
    		.set(imgIn, { clearProps: "yPercent, alpha" })

	}
})

Basically I would like to fire a callback at the end of "tlIn"like " … .set(imgIn, { clearProps: “yPercent, alpha”, onComplete: nowYouCanGoToNextSlide() })

Can anyone see if this is possible by looking in the API?

2

I would have thought that something like this should do the trick…

var swiper = new Swiper('.swiper-container', {
  onSlideChangeStart(self) {
    self.lockSwipes();
  },
  onSlideChangeEnd(self) {
    self.unlockSwipes();
  }
});

However, it causes the slider to hang completely. This seems to be a bug, so you might ask for assistance on the dedicated forum and/or file an issue at github.

1 Like
3

Thanks, got it working using:

onSlideChangeStart(swiper){
    swiper.lockSwipes()
    
    .... timelinestuff ... onComplete: swiper.unlockSwipes()
}
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.