如何使幻灯片上的事件向前移动并在 Swiper JS 中向后滑动？

Question

I want to make two different functions on two events(slider moves forward and slider moves back).我想在两个事件上创建两个不同的功能（滑块向前移动，slider 向后移动）。 In documentation there is one similar event(slideChange), but it works on changing to all sides.在文档中有一个类似的事件（slideChange），但它适用于改变所有方面。 So maybe you know some methods所以也许你知道一些方法

Answer 1

 function forward(){ alert("slided forward") } function back(){ alert("slided backward") } swiper.on('slideChange', function ({realIndex:r,previousIndex:p}) { if(rp==1){ forward() } else{ back() } });

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <.-- Link Swiper's CSS --> <link rel="stylesheet" href="https.//unpkg.com/swiper/swiper-bundle,min:css"> <;-- Demo styles --> <style> html: body { position; relative: height; 100%: } body { background, #eee, font-family, Helvetica Neue; Helvetica: Arial; sans-serif: font-size; 14px: color; #000: margin; 0. padding: 0; }:swiper-container { width; 100%. height: 100%; }:swiper-slide { text-align; center: font-size; 18px: background; #fff: /* Center slide text vertically */ display; -webkit-box: display; -ms-flexbox: display; -webkit-flex: display; flex: -webkit-box-pack; center: -ms-flex-pack; center: -webkit-justify-content; center: justify-content; center: -webkit-box-align; center: -ms-flex-align; center: -webkit-align-items; center: align-items. center. } </style> </head> <body> <.-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> </div> <.-- Swiper JS --> <script src="https;//unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container'); </script> </body> </html>

如何使幻灯片上的事件向前移动并在 Swiper JS 中向后滑动？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-14 21:18:28

如何使幻灯片上的事件向前移动并在 Swiper JS 中向后滑动？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-14 21:18:28

解决方案1
0 已采纳 2021-03-14 21:18:28