可以在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

如果您正在使用this 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'
    }
});