bxslider実装時の不具合

Question

お世話になります。
トップページにbxsliderを使ってカルーセルスライダーを作りたいのですが、アクセスしたときにレイアウトがずれてしまいます。
画面サイズを調整すると想定したレイアウトになってくれるのですが、リロードするとまたくずれてしまいます。
どのようにしたらよいでしょうか。

URLはこちらです。
https://www.rakuten.ne.jp/gold/japannail/test0706/

宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> トップページにbxsliderを使ってカルーセルスライダーを作りたいのですが、アクセスしたときにレイアウトがずれてしまいます。
> 画面サイズを調整すると想定したレイアウトになってくれるのですが、リロードするとまたくずれてしまいます。

style.css内
.key_visual_wrapper .key_left

こちらのwidthを25%に設定いただき、
修正されるかご確認いただけますでしょうか。

Answer

お返事ありがとうございます。

変更してみましたが、改善されませんでした。

Answer

ECマスターズの伊藤です。

> 変更してみましたが、改善されませんでした。

ご対応いただき、ありがとうございます。

確認させていただいたのですが、
CSSのアップロードが正常に行われていないようです。
https://ec-masters.gyazo.com/32f059929177b48b6382f27c992d82f6

お手数ですが、再度、アップロードの
ご対応をお願いいたします。

Answer

すみません。
先ほど該当箇所を変更してアップロードしました。
ご確認お願い致します。

Answer

ECマスターズの伊藤です。

> 先ほど該当箇所を変更してアップロードしました。

ご対応ありがとうございます。
ファイルが更新されていることを確認できました。

width:25%
がコメントアウトされている状態ですので、
コメントアウトを外していただき、
下ある
width:98.5%
をコメントアウトいただけますでしょうか。

https://ec-masters.gyazo.com/aa2ec04c98fbe392cd02f65de5c0ebfa

Answer

再度アップロードいたしました。

Answer

ECマスターズの田中です。

ご対応いただき、ありがとうございます。
スタイルシートを指定しても、同じ現象が起こることを確認いたしました。

おそらく、外部スタイルシートを読み込む前に
スライダーの作成が始まっていることが原因ですので、
下記２点を修正の上、
ページ読み込み完了時に再度スライダー作成を試みる仕組みに
ご変更いただきますようお願いします。

■1. タグ内を、下記のように修正

jQuery(document).ready(function($){
	（中略）
	$('.key_visual').bxSlider({
↓
var slider;
jQuery(document).ready(function($){
	（中略）
	slider = $('.key_visual').bxSlider({

■2. タグの直前に下記３行を追記

jQuery(window).on('load', function($){
	if( jQuery('.bx-wrapper').width() == 0 ) slider.reloadSlider();
});

Answer

修正してアップロードいたしました。依然、該当箇所が正常に動いておりません。

その下のドロップダウンメニューが少し変わっておりますが、スライダー部分はご教授いただいた部分以外、変更しておりません。

Answer

ECマスターズの伊藤です。

> 修正してアップロードいたしました。依然、該当箇所が正常に動いておりません。

ご対応ありがとうございます。

なんどかページをリロードいたしましたが、
以前のように、大きい画像が表示されないなどの
ページ崩れは発生しませんでした。

現在の表示はこちらになります。
https://ec-masters.gyazo.com/447faabcc9b60f3f79357c9784ae70df

キャッシュの可能性がございますので、
シークレットモードでのご確認を
お試しいただけますでしょうか。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7

Answer

？ありがとうございます。
スライダーは表示されていますが、その左横の小さい画像二つが、スライダーの高さいっぱいになるようにCSSを指定していたのですが、現在は小さくなってしまっています。それを改善することはできませんか？

Answer

ECマスターズの伊藤です。

> スライダーは表示されていますが、その左横の小さい画像二つが、スライダーの高さいっぱいになるようにCSSを指定していたのですが、現在は小さくなってしまっています。それを改善することはできませんか？

表示についてご連絡ありがとうございます。
こちらですが、おそらくJavaSriptの設定が必要なため、
明日以降、担当よりご連絡いたします。

サムネイルを縦に並ぶ表示方法で、
参考にしたサイトがございましたら、
ご教示いただけますと幸いです。

Answer

承知しました。引き続きよろしくお願いいたします。

サムネイル縦並びに関しては、どこのサイトも参考にしておらず、修正前はサムネイル2つをくくっているdiv.key_leftに以下の記述をして、スライダーとの高さを合わせておりました。


.key_visual_wrapper .key_left{
  width: 98.5%;
}

Answer

ECマスターズの田中です。

> スライダーは表示されていますが、その左横の小さい画像二つが、スライダーの高さいっぱいになるようにCSSを指定していたのですが、現在は小さくなってしまっています。それを改善することはできませんか？

左横の小さい画像の部分では、
正方形の画像２つを、縦横比を変えずに縦に並べているため、
その右にあるスライダーの横幅を小さくすれば、画像２つの高さも高くなります。
逆も然りのため、スライダーの横幅を調整して、高さを揃えていただきますようお願いします。

具体的な揃え方ですが、
特にスライドバナーを横3列に表示する予定がなければ、
bxSliderのオプションから
maxSlides: 3,
を削除していただき、

slideWidth: 450,//スライダーの幅
を
slideWidth: 352,//スライダーの幅
にご変更の上、表示をご確認いただきますようお願いします。

Answer

無事に実装できました。
何度もご対応いただき、ありがとうございました。

Answer

度々すみません。
最大幅のときはうまく動作するのですが、画面サイズを小さくしていくとスライダー横のサムネイルサイズがまた小さくなってしまいます。
どのように変更したらよいでしょうか。

Answer

ECマスターズの田中です。

> 最大幅のときはうまく動作するのですが、画面サイズを小さくしていくとスライダー横のサムネイルサイズがまた小さくなってしまいます。

こちら、ページ横幅が770〜1080pxの間の時に起こる現象、
ということでよろしいでしょうか。

そうしますと、縦のサムネイル・スライダー、共に
横幅の変更にご対応いただく必要がございます。

具体的な方法ですが、

slideWidth: 352,//スライダーの幅
を
slideWidth: 1000,//スライダーの幅
shrinkItems: true,
以上２行に差し替えていただいた上で、
下記スタイルシートを適用していただきますようお願いします。
タグで書いておりますが、内容をstyle.cssに統合していただくことをおすすめします。


.key_visual_wrapper .key_left {
	width:initial; /* この行の代わりに、widthプロパティを削除していただいても結構です */
	flex: calc( 20% + 4px ) 0 0;
}
.key_visual_wrapper :nth-child(2) {
	flex: calc( 80% - 4px ) 0 0;
}

Answer

ありがとうございます、改善されました。