Я использую 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 секунд.За исключением этих двух частей слайдер работает идеально, как хотелось бы.Любая помощь будет оценена.Спасибо!