Swiperでスライドを削除したい

Swiperでスライド画面を実装しています。
スライドを操作中に特定のスライドを削除したいため、公式サイトにあるデモと同じページを使って、スライドを削除するコードを書き加えました。

以下の「スライド削除実行（slideDelete()）」をクリックすると1枚目と3枚目のスライドが削除されます。
ここまでは良いのですが、スライド4枚目（以降）を表示しているときに削除を実行すると、表示しているスライドが4から5へ変わってしまいます。

スライド4を表示したまま、1枚目と3枚目のスライドを背後で削除したいのですが、スライド4を固定表示させたままスライド削除する方法が見つかりません（<div class="swiper-slide">をDOMから直接削除しても、スライド位置が4から5へずれてしまいます）。

上記を実現できるアイディア・方法がお分かりの方いらっしゃいましたらよろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>Swiper demo</title>
6  <!-- Link Swiper's CSS -->
7  <link rel="stylesheet" href="../package/css/swiper.min.css">
8
9  <!-- Demo styles -->
10  <style>
11    html, body {
12      position: relative;
13      height: 100%;
14    }
15    body {
16      background: #eee;
17      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
18      font-size: 14px;
19      color:#000;
20      margin: 0;
21      padding: 0;
22    }
23    .swiper-container {
24      width: 100%;
25      height: 100%;
26    }
27    .swiper-slide {
28      text-align: center;
29      font-size: 18px;
30      background: #fff;
31
32      /* Center slide text vertically */
33      display: -webkit-box;
34      display: -ms-flexbox;
35      display: -webkit-flex;
36      display: flex;
37      -webkit-box-pack: center;
38      -ms-flex-pack: center;
39      -webkit-justify-content: center;
40      justify-content: center;
41      -webkit-box-align: center;
42      -ms-flex-align: center;
43      -webkit-align-items: center;
44      align-items: center;
45    }
46  </style>
47</head>
48<body>
49  <!-- Swiper -->
50  <div class="swiper-container">
51    <div class="swiper-wrapper">
52      <div class="swiper-slide">Slide 1</div>
53      <div class="swiper-slide">Slide 2</div>
54      <div class="swiper-slide">Slide 3</div>
55      <div class="swiper-slide">Slide 4</div>
56      <div class="swiper-slide">Slide 5</div>
57      <div class="swiper-slide">Slide 6</div>
58      <div class="swiper-slide">Slide 7</div>
59      <div class="swiper-slide">Slide 8</div>
60      <div class="swiper-slide">Slide 9</div>
61      <div class="swiper-slide">Slide 10</div>
62    </div>
63  </div>
64
65
66  <div onclick="slideDelete()">スライド削除実行</div>
67
68  <!-- Swiper JS -->
69  <script src="../package/js/swiper.min.js"></script>
70
71  <!-- Initialize Swiper -->
72  <script>
73
74    var swiper = new Swiper('.swiper-container');
75
76    function slideDelete(){
77        swiper.removeSlide([0,2]);
78    }
79
80  </script>
81</body>
82</html>
83

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

回答1件

ベストアンサー

こんにちは

ドキュメントの Slider Methods & Properties によると、activeIndex というプロパティに、表示対象になるスライドのインデクスを取得できます。これを踏まえて、

**修正前: **

javascript
1swiper.removeSlide([0,2]);

と、2個のスライドを一度に removeSlide した後の swiper.activeIndex の値を確認したところ、

スライド4を固定表示させたまま

になるようには更新されませんでした。 removeSlide(n) と、1個削除だと望ましい（＝期待される動きを実現する）値に更新されるようですので、上記の1行を以下の2行に修正してみるといかがでしょうか？

**修正後: **

javascript
1swiper.removeSlide(2);    
2swiper.removeSlide(0);

**動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/WNeLGNP?editors=1111

なお上記で, removeSlide(0) と removeSlide(2) の順番を変えて

javascript
1swiper.removeSlide(0);    
2swiper.removeSlide(2);

とすると、上記の場合の removeSlide(2) 　は、元々のインデクス 0 のスライドが削除された後のインデクス 2 のスライドを消してしまうので、意図通りにはならなくなります。

以上、参考になれば幸いです。

補足

github の　issues で removeSlide に関する投稿をざっと眺めてみると、削除した後に（アプリが意図するＵＩとの）整合性をとるために、何がしかの工夫が必要というような内容の投稿がいくつか目につきましたので、そちらで質問すると、上記の回答の他にもより良い方法が、作者から直接、レスされるかもしれません。

投稿2019/09/21 15:55

編集2019/09/22 01:48