如何使幻灯片上的事件向前移动并在 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