動的に複数のスライダーを表示させた場合にページ送りの動作がおかしくなる

Vueのv-forを使い、動的に複数のスライダーを設置しました。(Swiper.jsを使用しています。)
スライダーの画像はJSONデータから呼び出しております。

複数のスライダーにスライダー画像を設置することはできたのですが、スライダーのページ送りボタンが正常に動作しておりません。
（ページ送りボタンを押すと画像は切り替わるのですが、画像の表示が前のスライドに戻ったりします。）

上記に際し、Swiper.jsとスライダー箇所を紐付けるクラス名「.swiper-container」を各スライダー毎にバラバラすればページ送りが正常に動作するのではと考えています。

わからない点
・各スライダー毎にJqueryの記載と別々のクラス名を記載する方法（v-forで動的に生成されるリストに対して）
・そもそも各スライダー毎にJqueryの記載を書く必要があるのかどうか

尚、わからない点がクリアになった際は、f-forの<div class="swiper-container">の部分は

<div v-bind:class="[product.id]">に変更をしようと考えております。

HTML

<div class="item" v-for="product in data” :key="product.id" v-bind:id="['s' + product.id]">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <img v-bind:src="[product.slider1]" />
            <img v-bind:src="[product.slider2]" />
            <img v-bind:src="[product.slider3]" />
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

var mySwiper = new Swiper ('.swiper-container', {
    slidesPerView: 1,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
})

JSONデータ

[
    { id:111, slider1: "/img/pic1-1.jpg", slider2: "/img/pic1-2.jpg", slider3: "/img/pic1-3.jpg" }
    { id:222, slider1: "/img/pic2-1.jpg", slider2: "/img/pic2-2.jpg", slider3: "/img/pic2-3.jpg" }
    { id:333, slider1: "/img/pic3-1.jpg", slider2: "/img/pic3-2.jpg", slider3: "/img/pic3-3.jpg" }
...
]

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

回答1件

ベストアンサー

HTMLElement を渡せるようなので、それで試してみてはいかがでしょう。

js
1jQuery( '.swiper-container' ).each( function() {
2    var mySwiper = new Swiper ( this, {
3        slidesPerView: 1,
4        navigation: {
5            nextEl: jQuery( this ).find( '.swiper-button-next' ).get( 0 ),
6            prevEl: jQuery( this ).find( '.swiper-button-prev' ).get( 0 ),
7        },
8        pagination: {
9            el: jQuery( this ).find( '.swiper-pagination' ).get( 0 ),
10        },
11    });
12}); // 未テスト