スライドが機能しません

[s_yamaoka]

Swiper.jsのJavaScriptを埋め込むと、おかしな挙動になります。

const mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

コードはおかしくないはずなのですが、何が影響しているのか分かりません。

HTML構造も載せませんがおかしくはないです。

画面収録の様子です。

https://d.kuku.lu/e81836e41

どなたか助けていただけると幸いです。

[株式会社おいかぜ]

@s_yamaoka 

こんにちは！

動画確認しました。

大きいスライドの下にあるサムネイルのスライドもswiperでしょうか？

その場合、別々のクラス名で起動しなければいけないかと思います。

的外れでしたら申し訳ございません。よろしくおねがいします！

[s_yamaoka]

ご回答ありがとうございます！

サムネイルはSwiperのものではなく、独自のコードで実装されたものです。

しかし、それが何か邪魔をしている可能性も大きいですよね。

本当にありがとうございます。

[株式会社おいかぜ]

@s_yamaoka 

ご確認ありがとうございます。サムネイルはSwiperではないのですね！

swiper以外のスタイルが影響している可能性もあるかと思います（過去にそのような経験をしました）

ので、

1. Swiperに必要なクラス以外を省いて動作するか確認する

2. コンソールに表示されているエラーを無くす

ということから行って頂くと良いかと思います。

1で正常に動作するのであればSwiperに必要なクラス以外が動作を邪魔している可能性があります。

スライドの動作自体は確認できているようですので、この可能性が高いかと思います！

[s_yamaoka]

ありがとうございます。

アドバイスの通り、色々と試しました。

①バリエーションを選択すると、バリエーションに登録されている画像が一番目に表示される

②しかし、Swiperはバリエーションではない通常の画像をスライドする

説明が下手で申し訳ありませんが、この①と②が影響していそうだと思いました。

----

・ロードすると、最初の画像は表示されていないですが、コード上ではSwiperで1番目に表示されるはずのものです。

・そこで前ボタンを押すとバリエーションの画像が表示されます。（この画像だけ唯一表示されており、ロード時もこちらがactiveになっており最初の未表示のものはnextになっている）

・Swiperの機能を解除するとバリエーションの画像が最初に表示される

----

以上の状態から判断しました。

説明が下手ですみません。

[株式会社おいかぜ]

@s_yamaoka 

おそらくですが、バリエーションを選択すると画像を切り替えるような処理がデフォルトのクラス名を対象に実装されているのかと思います。

なので面倒かもですが、サムネイルのスライドもSwiperで構築し直して、バリエーションを選択したときにSwiperの画像を切り替えるような処理を実装する必要があると思います。

※ メインスライドとサムネイルをSwiperとして連動させるには下記のような方法があります。

・https://into-the-program.com/swiper-thumbnail-slider/

・https://junpei-sugiyama.com/swiper-thumbnail/