Is it possible to change the direction vertical slider in swiper slider? I want to have both top to bottom and bottom to top option?

Question

I'm working on a page that contains two vertical sliders. But on clicking down arrow button or on mouse scroll, I want one to slide up words (bottom to top) and the other downwards (top to bottom). How can I implement this?

My code basically looks something like this:

<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>

Script like this:

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

If you are using this swiper there is the navigation object you need to add to your configuration.

Something like in the example the guys that are developing the Swiper are reporting in their API:

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

If you want to invert the standard swiping (direction of swipe) you just need to swap the classes that reference your arrows in the configuration.

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