Вложенный Swiper не останавливается при смахивании вертикально - PullRequest
0 голосов
/ 07 июля 2019

Я использую API Swiper, чтобы попытаться создать горизонтальное слайд-шоу, в котором каждый горизонтальный слайдер имеет 5 вертикальных контейнеров над ним.Проблема в том, что, когда пользователь проводит по экрану, автозапуск не останавливается.Это остановится на горизонтальных ударах однако.Я также хотел бы перезапустить автозапуск после 90 секунд бездействия.

Я пробовал несколько способов реализации автозапуска, и вертикальный свайпер не помог.

<!-- Swiper -->
  <div class="swiper-container swiper-container-h">
    <div class="swiper-wrapper">
            <div class="swiper-slide">
                    <div class="swiper-container swiper-container-v">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="http://192.168.1.17:8080/Nestle Images-Demo\images (3).jpg" alt="Pic 2"></div>
                        <div class="swiper-slide">Vertical-1 Slide 1</div>
                        <div class="swiper-slide">Vertical-1 Slide 2</div>
                        <div class="swiper-slide">Vertical-1 Slide 3</div>
                        <div class="swiper-slide">Vertical-1 Slide 4</div>
                        <div class="swiper-slide">Vertical-1 Slide 5</div>
                      </div>
                      <div class="swiper-pagination swiper-pagination-v"></div>
                    </div>
                  </div>
      <div class="swiper-slide">
        <div class="swiper-container swiper-container-v">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="http://192.168.1.17:8080/Nestle Images-Demo\images.png" alt="Pic 1"></div>
            <div class="swiper-slide">Vertical-2 Slide 1</div>
            <div class="swiper-slide">Vertical-2 Slide 2</div>
            <div class="swiper-slide">Vertical-2 Slide 3</div>
            <div class="swiper-slide">Vertical-2 Slide 4</div>
            <div class="swiper-slide">Vertical-2 Slide 5</div>
          </div>
          <div class="swiper-pagination swiper-pagination-v"></div>
        </div>
      </div>
      <div class="swiper-slide">
            <div class="swiper-container swiper-container-v">
              <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="http://192.168.1.17:8080/Nestle Images-Demo\images.jpg" alt="Pic 1"></div>
                <div class="swiper-slide">Vertical-3 Slide 1</div>
                <div class="swiper-slide">Vertical-3 Slide 2</div>
                <div class="swiper-slide">Vertical-3 Slide 3</div>
                <div class="swiper-slide">Vertical-3 Slide 4</div>
                <div class="swiper-slide">Vertical-3 Slide 5</div>
              </div>
              <div class="swiper-pagination swiper-pagination-v"></div>
            </div>
          </div>
          <div class="swiper-slide">
                <div class="swiper-container swiper-container-v">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="http://192.168.1.17:8080/Nestle Images-Demo\images (1).jpg" alt="Pic 2"></div>
                    <div class="swiper-slide">Vertical-4 Slide 1</div>
                    <div class="swiper-slide">Vertical-4 Slide 2</div>
                    <div class="swiper-slide">Vertical-4 Slide 3</div>
                    <div class="swiper-slide">Vertical-4 Slide 4</div>
                    <div class="swiper-slide">Vertical-4 Slide 5</div>
                  </div>
                  <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
              </div>
              <div class="swiper-slide">
                    <div class="swiper-container swiper-container-v">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="http://192.168.1.17:8080/Nestle Images-Demo\images (2).jpg" alt="Pic 2"></div>
                        <div class="swiper-slide">Vertical-5 Slide 1</div>
                        <div class="swiper-slide">Vertical-5 Slide 2</div>
                        <div class="swiper-slide">Vertical-5 Slide 3</div>
                        <div class="swiper-slide">Vertical-5 Slide 4</div>
                        <div class="swiper-slide">Vertical-5 Slide 5</div>
                      </div>
                      <div class="swiper-pagination swiper-pagination-v"></div>
                    </div>
                  </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-h"></div>
  </div>

  <!-- Swiper JS -->
  <script src="http://192.168.1.17:8080/swiper-master/dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiperH = new Swiper('.swiper-container-h', {
      spaceBetween: 50,
     loop: true,
     autoplay: {
        delay: 2500,
        disableOnInteraction: true
      }, 
      pagination: {
        el: '.swiper-pagination-h',
        clickable: true,
      },
    });
    var swiperV = new Swiper('.swiper-container-v', {
      direction: 'vertical',
      spaceBetween: 50,
      loop: true,
      pagination: {
        el: '.swiper-pagination-v',
        clickable: true,
      },
    });
  </script>

Ожидаемый результат -движущийся слайд-шоу с сенсорным экраном, который останавливается, когда пользователь перемещает слайды вертикально или горизонтально.Кроме того, он должен возобновить автозапуск, если неактивен в течение 90 секунд.За исключением этих двух частей слайдер работает идеально, как хотелось бы.Любая помощь будет оценена.Спасибо!

...