楽天スマホトップページ　スライドバナーについて

Question

お世話になっております。
以前下記質問をしたのですが、
https://forum.ec-masters.net/post_view.php?id=9451
やはり改善されていないようでしたので、
ご案内いただいた記述を追加しましたが、一番最後のバナーが表示され、
1枚目のバナーが飛ばされた状態でスライドしてしまいます。
自動的に動いた後、2枚目が表示される。

ページを再読み込みすると問題なく1枚目のバナーが表示されるのですが、
お気に入り登録などからページへ飛ぶと上記のような現象が起こります。
もう一度見ていただけないでしょうか。

Answer

ECマスターズの田中です。

スマートフォン用トップページである
https://www.rakuten.ne.jp/gold/yamaguchi-seni/index_sp.html
上記HTMLファイルを確認したところ、
未だに過去のバージョンのbxSliderを読み込んでいることがわかりました。

つきましては、同ページで読み込んでいる
bxSlider用のJS・CSSファイルを最新版に差し替えていただいた上で、
改めて、表示をご確認いただきますようお願いします。

なお、JSファイルにつきましては、
すでに楽天GOLDの「js」フォルダに最新版をご用意いただいておりますので、
「index_sp.html」にてJSファイルを読み込んでいる

上記HTMLタグを

のように、URLのみ修正していただくことをオススメします。

CSSファイルは、
https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css
よりダウンロードしたファイルを、
楽天GOLDの「jquery.bxslider.css」ファイルに置き換えてご利用ください。
その際、上記JSファイルに併せて、
楽天GOLDの「sp/css」フォルダから「css」フォルダに移動していただくとわかりやすいかと思います。

以上の手順で、「index_sp.html」にて
最新のbxSlider用JS・CSSファイルを読み込むようにご設定いただいた上で、
再度、表示をご確認いただきますようお願いします。

なお、「jquery.bxslider.js」の末尾近くに追記していただいた

$("#sliderCont").slick({
dots: true,
infinite: true,
startSlide: 0
});

は、「slick.js」プラグインを利用開始するためのタグであり、
「bxSlider」用JSファイルの中にご記載いただいておりますと、
エラーの原因となりやすくなりますので、記述を削除していただきますようお願いします。

前回のご質問にて、
スマートフォン用ページに存在しない「slick.js」用のタグを
誤ってご案内差し上げておりました、失礼いたしました。

Answer

ありがとうございます。
jsのみ読み込ませた状態で改善されたのですが、
cssも新たにご案内いただいたものに置き換える必要はありますか?
試しにご案内いただいたリンクをクリックして、前文貼り付けたのですが、表示が崩れてしまいました。

Answer

ECマスターズの田中です。

> cssも新たにご案内いただいたものに置き換える必要はありますか?

CSSの置き換えは、JSとバージョンを合わせることが目的のため、
逆に表示が崩れるのであれば、元のままご利用いただいて結構です。

バージョンの違いによる表示崩れが起こる可能性も多少ございますので、
Androidなど、可能な限り異なる環境にて、問題がないか一度ご確認いただければ幸いです。

Answer

何度も申し訳ございません。
上記の件でiosデバイスしかなく表示確認が不十分の状態です。
iphone6sでしか表示確認が出来ていません。

本日、クローム拡張機能のスマホ表示にて確認しました所、
改善されていませんでした。

Answer

ECマスターズの田中です。

いただいた現象について、
ECマスターズでも再現することができましたので、
原因について調査を行ったところ、
bxSliderの有名なバグであることがわかりました。

対策方法はいろいろとあったのですが、
読み込み速度を遅らせる方法ですと、読み込み途中の表示が乱れる可能性がございますので、
http://tom-blog.com/%E3%80%90bxslider%E3%80%91%E6%9C%80%E5%BE%8C%E3%81%AE%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%81%8C%E6%9C%80%E5%88%9D%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE/
上記ページに紹介されている、bxSliderのJSファイルを修正する方法がオススメです。
（※紹介されているコードに使われている ‘ と ’ は、'に修正していただく必要があります）

上記括弧書きの修正もあり、複雑な修正が必要となりますので、
私にて、修正済みのjsファイルを「jquery.bxslider.fix.js」という名前で
GOLDの「js」フォルダにご用意させていただきました。



上記タグで読み込んでご利用いただきますようお願いします。

Answer

ありがとうございました。
自分ひとりでは到底解決できなかったと思います。
今後ともよろしくお願い致します。

楽天スマホトップページ スライドバナーについて

楽天スマホトップページ　スライドバナーについて