以前ブログにまとめたコード、クラス化しました。（めちゃくちゃペアプロしてもらった。ありがたい限り）
https://chiilog.com/2021/02/12/2306/
今度はGitHubにあげました。
https://github.com/chiilog/multiple-swippers
PHPのクラス化はちょっと前からやってたのですが、JavaScriptのクラス化は今回が初めて。ちょこちょこ記述が似てるから前ほど「ヒッ！無理！」とはならなかったあたり無条件反射でワタシニハ無理デスを抜けられたかな。
読み方がわかってくると、クラス化せず整理せず思うがまま書いてるコードより全然読めるじゃないですか？メソッド単位でやってることを追いかければよい。（多分膨大な量のコードをはいって渡されたら泣くと思うけど）
Swiperから追加で対応してるもの
- 再生ボタン/一時停止ボタン
- 次へ/前へボタン（Swiper本体実装とは別）
- ウィンドウ幅でSwiperの有効化・無効化（必要ないときはmediaQueryをnullに設定）
- 同一クラスをページ中に複数設置
セレクタの指定にquerySelectorAllとかquerySelectorを使ってます。クラス指定するとバグったり（複数に対応できない）しました(´・ω・｀)
メソッドのコツ
コツと言うか気をつけておくこと。
- 複数の機能をひとつのメソッドに持たせない
- まず正確にどういう機能をつくるか日本語で書く（←JSに限らずこれがイマイチできてない）
- メソッド名をわかりやすくする（ぱっとメソッド名見て何してるかわかるとよい）