swiperの一時停止ボタンがすぐ止まらない

実現したいこと

swiperを使って画像がループしているのを、ボタンクリックで一時停止や再開できるようにしたいです。

発生している問題・分からないこと

swiperとボタンの実装はできましたが、一時停止をクリックしてもすぐ止まらず、画像の端に来た時に止まるようになります。
クリック時にすぐ停止、さらにクリック時にすぐ再生するにはどうすればいいでしょうか？
swiperのバージョンは８です。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1">
6	<title></title>
7	<link rel="stylesheet" href="css/destyle.css"> 
8	<link rel="stylesheet" type="text/css" href="css/style.css">
9	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
10	<link rel="stylesheet" href="css/swiper.min.css">
11</head>
12<body>
13<div class="swiper-loop">
14  <div class="swiper-loop-right">
15    <div class="swiper">
16      <div class="swiper-wrapper">
17        <div class="swiper-slide">
18          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
19        </div>
20        <div class="swiper-slide">
21          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
22        </div>
23        <div class="swiper-slide">
24          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
25        </div>
26        <div class="swiper-slide">
27          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
28        </div>
29        <div class="swiper-slide">
30          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
31        </div>
32        <div class="swiper-slide">
33          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
34        </div>
35      </div>
36    </div>
37  </div>
38  <div class="swiper-loop-left">
39    <div class="swiper">
40      <div class="swiper-wrapper">
41        <div class="swiper-slide">
42          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
43        </div>
44        <div class="swiper-slide">
45          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
46        </div>
47        <div class="swiper-slide">
48          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
49        </div>
50        <div class="swiper-slide">
51          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
52        </div>
53        <div class="swiper-slide">
54          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
55        </div>
56        <div class="swiper-slide">
57          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
58        </div>
59      </div>
60    </div>
61  </div>
62<span class="stopbtn stop"></span>
63</div>
64</body>
65<script src="js/swiper-bundle.min.js"></script>
66<script type="text/javascript" src="js/javascript.js"></script>
67</html>

css
1@charset "utf-8";
2
3/* スライドの動き等速 */
4.swiper-wrapper {
5  transition-timing-function: linear;
6}
7/* 画像のサイズ調整 */
8.swiper-slide img {
9  height: auto;
10  width: 100%;
11}
12
13.stopbtn {
14  cursor: pointer;
15  position: absolute;
16  bottom: 10px;
17  right: 10px;
18  z-index: 100;
19  background: #007aff;
20  width: 60px;
21  height: 60px;
22  border-radius: 10px;
23  text-align: center;
24  line-height: 60px;
25  opacity: 0.85;
26  color: #fff;
27}
28.stopbtn:hover {
29  opacity: 1;
30}
31.stopbtn.stop:before {
32  display: block;
33  content: "=";
34  -moz-transform: rotate(90deg);
35  -webkit-transform: rotate(90deg);
36  -o-transform: rotate(90deg);
37  -ms-transform: rotate(90deg);
38  transform: rotate(90deg);
39  font-size: 24px;
40  font-weight: bold;
41}
42.stopbtn.start:before {
43  content: "▶";
44}
45
46
47/*ボタンの位置（だいたいmvのスライドなのでこのclass名）*/
48/*.mvStop{
49  position: absolute;
50  left: calc(50% + 80px);
51  bottom: 0;
52  z-index: 100;*/
53}
54
55/*ボタンの装飾*/
56/*.stopbtn {
57    cursor: pointer;
58    width: 30px;
59    height: 30px;
60    border-radius: 50%;
61    background-color: #00BFB8;
62}
63
64.stopbtn.stop {
65  position: relative;
66  display: inline-block;
67}
68.stopbtn.stop::before, .stopbtn.stop::after {
69  position: absolute;
70  top: 7px;
71  content: '';
72  width: 3px;
73  height: 15px;
74  background-color: #fff;
75}
76.stopbtn.stop::before {
77  left: 9px;
78}
79.stopbtn.stop::after {
80  right: 9px;
81}
82
83
84.stopbtn.start {
85  position: relative;
86  display: inline-block;
87}
88.stopbtn.start::before {
89  position: absolute;
90  top: 8px;
91  left: 10px;
92  content: '';
93  width: 0;
94  height: 0;
95  border-style: solid;
96  border-width: 7px 0 7px 14px;
97  border-color: transparent transparent transparent #fff;
98}
99.stopbtn.start::after {
100  display: none;
101}*/
102

JavaScript
1const swiper_right = new Swiper(".swiper-loop-right .swiper", {
2  loop: true, // ループ有効
3  slidesPerView: 3, // 一度に表示する枚数
4  speed: 6000, // ループの時間
5  allowTouchMove: false, // スワイプ無効
6  autoplay: {
7    delay: 0, // 途切れなくループ
8  },
9});
10const swiper_left = new Swiper(".swiper-loop-left .swiper", {
11  loop: true, // ループ有効
12  slidesPerView: 3, // 一度に表示する枚数
13  speed: 6000, // ループの時間
14  allowTouchMove: false, // スワイプ無効
15  autoplay: {
16    delay: 0, // 途切れなくループ
17    reverseDirection: true, // 逆方向有効化
18  },
19});
20
21$(window).on('load', function() {
22    $('.stopbtn').on('click', function() {
23        let _class = $(this).attr('class');
24        if (_class == 'stopbtn stop') {
25            $(this)
26                .addClass('start')
27                .removeClass('stop');
28                swiper_left.autoplay.stop();
29                swiper_right.autoplay.stop();
30        } else {
31            $(this)
32                .addClass('stop')
33                .removeClass('start');
34                swiper_left.autoplay.start();
35                swiper_right.autoplay.start();
36        }
37    });
38});
39
40// $(window).load(function() {
41//   $(".stopbtn").on("click", function() {
42//     var _class = $(this).attr("class");
43//     if(_class == "stopbtn stop"){
44//       $(this).addClass("start").removeClass("stop");
45//       swiper_left.autoplay.stop();
46//     }
47//     else {
48//       $(this).addClass("stop").removeClass("start");
49//       swiper_left.autoplay.start();
50//     }
51//   });
52// });
53// document.querySelector(".swiper_pause").addEventListener("click", function(){
54//   swiper_left.autoplay.stop();
55// });
56// document.querySelector(".swiper_start").addEventListener("click", function(){
57//   swiper_left.autoplay.start();
58// });

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

停止方法といくらか調べましたが、どれもうまくいきませんでした。
お教えいただけますと幸いです。

補足

特になし

行動規範の内容に同意します

回答2件

Swiper は CSS Transition を使って要素をスライドさせていますので、スライドの途中で停止できないのは仕様です。
途中で止めたいのであれば、ご自分でコードを書く必要があります。おそらくswiper.getTranslate()などでtranslateの現在値を取得してごにょごにょする必要があるかと思います。動作を再開させるときの処理もしなければならないでしょう。結構面倒そうです。
swiper.getTranslate() | Swiper API

いろいろググってみたところ、公式のIssueの中にそのようなコードを書いた人のコメントがありました。当方では動作未確認ですし、バージョン8で動作するかどうかはわかりません。
when I use autoplay.stop()，the transition don‘t stop immediately · Issue #6481 · nolimits4web/swiper

投稿2025/04/12 00:38

Lhankor_Mhy

総合スコア37369

swiper.pause()なのでswiper_left.pause();ではないでしょうか。

【Swiper API#swiper.pause()】
https://swiperjs.com/swiper-api#method-swiper-pause

投稿2025/04/10 14:56

kei344

総合スコア69623

keel

2025/04/11 00:45

回答ありがとうございます。頂いたコードで試したところ、書く場所が悪かったのか、何も変わりませんでした...。 JavaScriptの28,29行目を書き換えたらいいのでしょうか？

kei344

2025/04/11 07:15

swiper_left.autoplay.stop(); swiper_right.autoplay.stop(); ↓ swiper_left.pause(); swiper_right.pause(); ＆ swiper_left.autoplay.start(); swiper_right.autoplay.start(); ↓ swiper_left.start(); swiper_right.start(); でかわりませんか？

Lhankor_Mhy

2025/04/12 01:01

ドキュメントがちょっと変な感じがしますね。ここにはそのメソッドはないです。 https://swiperjs.com/swiper-api#methods--properties モジュール内でのメソッドということなんでしょうけれども、その表記でいいの？？？という気がするドキュメントです。

kei344

2025/04/12 05:40

To: Lhankor_Mhy さんご指摘ありがとうございます。その通りでした、試してから回答すべきでした。 https://jsfiddle.net/kgvjbxym/ あと、「すぐ止まらず」は「CSS Transitionの途中で停止したい」ということなんですね。（これも試してから気づきました） To: keel さん見当違いの回答をしていました。すみませんでした。

行動規範の内容に同意します

あなたの回答