スライダーをうまく設置できない

Question

いつもお世話になっております。

楽天goldを使って制作した特集ページを再構築しているのですが、
その際に「Swiper」を使ってスライダーを設置しようと設定したのですが、
上手く反映されず、PCでは表示はできているものの、矢印を押しても
次のスライドにならない・スマホ表示では崩れてしまった状態です……。

test環境↓
http://tokeiten.co.jp/Test/monitor-test/xc-monitor.html

スライドさせたいコンテンツがいろいろなコードを使って制作しているので、
それが原因でごちゃごちゃしてうまく設置できていないのでしょうか？
ご教示の程お願いいたします。

Accepted Answer

ECマスターズの田中です。

ご利用されている Swiper 5.2.1 では、
左右矢印として使う要素を
オプションでご指定いただく必要がございます。

Swiperを動作させる部分にて
// ここにオプションを記述
と記載されている箇所に、

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

上記４行を追記していただきますようお願いします。

スマートフォン閲覧時に崩れる様子を確認したところ、
画像が読み込まれていないことが原因のようです。

xc-monitor.html 閲覧時、開発者ツールを確認すると、
https://ec-masters.gyazo.com/97b87040edad1a30102f7c5138112101
上記スクリーンショットのように、
多数の404（ファイルが見つからない）エラーが発生しており、

特に、スマートフォンの見た目に変更したタイミングで、
赤枠で囲った部分である、
http://tokeiten.co.jp/Test/monitor-test/img/xc-select2.png
http://tokeiten.co.jp/Test/monitor-test/img/ec1144-51w.png
http://tokeiten.co.jp/Test/monitor-test/img/es9434-53w.png 
上記３つのURLにて、404エラーが発生しております。

ソース内の該当URLを本番環境のものに変更する、
テスト環境に該当ファイルをコピーする、などして、
これらの404エラーを解決した上で、
改めてスマートフォンの見た目をご確認いただきますようお願いします。

Answer

オプションを追加しましたら矢印でスライドできるようになりました！

CSSの方で指定していた画像URLが違ったようで、正しいものに修正しましたら
スマホでも崩れることなく動きました。

ありがとうございました！