How to make event on slide move forward and slide move back in Swiper JS?
Question
I want to make two different functions on two events(slider moves forward and slider moves back). In documentation there is one similar event(slideChange), but it works on changing to all sides. So maybe you know some methods
1 answers
solution1
0 ACCPTED 2021-03-14 21:18:28
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Prevent Swiper Slide move on click event
Is there any way to make Swiper slide move with delay time vertically?
how to make text move below the JQuery slide
Swiper.js pagination custom bullet won't click to move to next slide
How to move div with slide animation?
How to Slide or Move this Set of Divs
How to move to next slide programmatically?
How to change centered slide by clicking on desired slide in swiper.js?
How to detect current slide in swiper js?
how to make slide transition smoother and not instant on swiper update - Swiper API
Related Tags