有什么辦法可以讓 Swiper 滑動在延遲時間內垂直移動？

Question

我正在嘗試使用 Swiper.js 制作幻燈片，並且在單擊導航按鈕時嘗試放置一些 animation。 因此，當我單擊導航按鈕時，一些 animation 適用於當前幻燈片，在 animation 完成后，我希望它移動到下一張或上一張幻燈片。 我查找了 Swiper API 但在那里找不到答案，並且由於幻燈片應該垂直移動，因此實現這一點似乎更加困難。 有什么方法可以讓 Swiper Slide 像這樣工作嗎？ 提前謝謝了。

Answer 1

要垂直移動 slider，您可以在 swiper init選項中指定direction: "vertical" 。

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