Is there any way to make Swiper slide move with delay time vertically?

Question

I'm trying to make a slide with Swiper.js and I'm trying to put some animation when I click the navigation button. So when I click the navigation button, some animation applies to the current slide and after the animation finish, I want it to move to the next or prev slide. I've looked up Swiper API but I couldn't find the answer there and Since the slide should move vertically, it seems ever more difficult to implement this. Are there any ways to make Swiper Slide work like this? Many thanks in advance.

Nithin Thampi Nithin Thampi · Accepted Answer · 2019-10-27T08:53:53

To move the slider vertically you can specify direction: "vertical" in swiper init options.

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })

To create custom transitions the below link might help.

https://medium.com/@arnost/creating-custom-slide-transitions-in-swiper-js-also-with-gsap-ac71f9badf53

Is there any way to make Swiper slide move with delay time vertically?

1 Answers