是否可以更改 swiper 滑块中的方向垂直滑块？ 我想要从上到下和从下到上的选项？

Question

我正在处理一个包含两个垂直滑块的页面。 但是在单击向下箭头按钮或鼠标滚动时，我希望一个向上滑动单词（从下到上），另一个向下滑动（从上到下）。 我该如何实施？

我的代码基本上是这样的：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <div class="swiper-container swiper-container-v swiper-left">
            <div class="swiper-pagination swiper-pagination-v"></div>
            <div class="swiper-wrapper">
              <div class="swiper-slide">Vertical Slide 1</div>
              <div class="swiper-slide">Vertical Slide 2</div>
              <div class="swiper-slide">Vertical Slide 3</div>
              <div class="swiper-slide">Vertical Slide 4</div>
              <div class="swiper-slide">Vertical Slide 5</div>
            </div>
          </div>
        <div class="swiper-container swiper-container-v2 swiper-right">
            <div class="swiper-wrapper">
              <div class="swiper-slide">Vertical Slide 1</div>
              <div class="swiper-slide">Vertical Slide 2</div>
              <div class="swiper-slide">Vertical Slide 3</div>
              <div class="swiper-slide">Vertical Slide 4</div>
              <div class="swiper-slide">Vertical Slide 5</div>
            </div>
          </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
 </div>

像这样的脚本：

var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',

    });
    var swiperV = new Swiper('.swiper-container-v', {
      direction: 'vertical',
      spaceBetween: 50,
      keyboard: {
        enabled: true,
      },
      pagination: {
        el: '.swiper-pagination-v',
        clickable: true,
      },
      loop: true,
    });
    var swiperV2 = new Swiper('.swiper-container-v2', {
      direction: 'vertical',
      spaceBetween: 50,
      keyboard: {
        enabled: true,
      },
      pagination: {
        el: '.swiper-pagination-v',
        clickable: true,
      },
      loop: true,
      reverseDirection: true
    });

Answer 1

如果您正在使用此 swiper ，则需要将navigation对象添加到您的配置中。

类似于示例中开发 Swiper 的人在他们的 API 中报告的内容：

var mySwiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
});

如果您想反转标准滑动（滑动方向），您只需要交换配置中引用箭头的类。

var mySwiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-prev',
        prevEl: '.swiper-button-next'
    }
});