FROM CACHE - jp_header

スライドが機能しません

スライドが機能しません

s_yamaoka
Shopify Partner
15 0 1

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

 

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

5件の返信5

株式会社おいかぜ
Shopify Partner
84 34 32

@s_yamaoka 

 

こんにちは!

動画確認しました。

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

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

 

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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
s_yamaoka
Shopify Partner
15 0 1

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

 

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

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

 

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

株式会社おいかぜ
Shopify Partner
84 34 32

@s_yamaoka 

 

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

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

ので、

 

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

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

 

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

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

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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
s_yamaoka
Shopify Partner
15 0 1

ありがとうございます。

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

 

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

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

 

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

----

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

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

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

----

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

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

株式会社おいかぜ
Shopify Partner
84 34 32

@s_yamaoka 

 

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

 

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

 

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

 

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

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

 

 

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp