有什么方法可以使Swiper幻灯片垂直移动并具有延迟时间？

Question

我正在尝试使用Swiper.js制作幻灯片，并且当我单击导航按钮时试图放一些动画。因此，当我单击导航按钮时，某些动画将应用于当前幻灯片，并且在动画结束后，我希望它移至下一张或上一张幻灯片。我已经查找了Swiper API，但在那里找不到答案，并且由于幻灯片应该垂直移动，因此似乎很难实现这一点。有什么方法可以使Swiper Slide像这样工作吗？提前非常感谢。

Answer 1

要垂直移动滑块，可以在滑动direction: "vertical"选项中指定init。

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',
    },
  })

要创建自定义过渡，下面的链接可能会有所帮助。

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