如何使幻燈片上的事件向前移動並在 Swiper JS 中向后滑動？

Question

我想在兩個事件上創建兩個不同的功能（滑塊向前移動，slider 向后移動）。 在文檔中有一個類似的事件（slideChange），但它適用於改變所有方面。 所以也許你知道一些方法

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