質問: スライダーをうまく設置できない いつもお世話になっております。楽天goldを使って制作した特集ページを再構築しているのですが、その際に「swiper」を使ってスライダーを設置しようと設定したのですが、上手く反映されず、pcでは表示はできているものの、矢印を押しても次のスライドにならない・スマホ表示では崩れてしまった状態です......。test環境↓http://tokeiten.co.jp/test/monitor-test/xc-monitor.htmlスライドさせたいコンテンツがいろいろなコードを使って制作しているので、それが原因でごちゃごちゃしてうまく設置できていないのでしょうか?ご教示の程お願いいたします。
回答: ecマスターズの田中です。ご利用されている swiper 5.2.1 では、左右矢印として使う要素をオプションでご指定いただく必要がございます。swiperを動作させる部分にて// ここにオプションを記述と記載されている箇所に、 navigation: { nextel: '.swiper-button-next', prevel: '.swiper-button-prev', },上記4行を追記していただきますようお願いします。スマートフォン閲覧時に崩れる様子を確認したところ、画像が読み込まれていないことが原因のようです。xc-monitor.html 閲覧時、開発者ツールを確認すると、https://ec-masters.gyazo.com/97b87040edad1a30102f7c5138112101上記スクリーンショットのように、多数の404(ファイルが見つからない)エラーが発生しており、特に、スマートフォンの見た目に変更したタイミングで、赤枠で囲った部分である、http://tokeiten.co.jp/test/monitor-test/img/xc-select2.pnghttp://tokeiten.co.jp/test/monitor-test/img/ec1144-51w.pnghttp://tokeiten.co.jp/test/monitor-test/img/es9434-53w.png 上記3つのurlにて、404エラーが発生しております。ソース内の該当urlを本番環境のものに変更する、テスト環境に該当ファイルをコピーする、などして、これらの404エラーを解決した上で、改めてスマートフォンの見た目をご確認いただきますようお願いします。