Можно ли изменить направление вертикального ползунка в ползунке swiper? Я хочу иметь вариант сверху вниз и снизу вверх? - PullRequest
Новая
       5

Можно ли изменить направление вертикального ползунка в ползунке swiper? Я хочу иметь вариант сверху вниз и снизу вверх?

0 голосов
/ 18 февраля 2020

Я работаю над страницей, которая содержит два вертикальных ползунка. Но, нажимая кнопку со стрелкой вниз или прокручивая мышь, я хочу, чтобы одно скользило вверх по словам (снизу вверх), а другое вниз (сверху вниз). Как я могу это реализовать?

Мой код выглядит примерно так: 

<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
    });

1 Ответ

0 голосов
/ 18 февраля 2020

Если вы используете этот 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'
    }
});
...