bxsliderのサムネイルに掲載している画像が見切れてしまう件について

Question

お世話になっております。
楽天ショップのトップページにGOLD領域を使用しています。
コチラにbxsliderを埋め込んでいるのですが、サムネイルに指定している画像がどうしても見切れてしまいます。なんなら、メインの画像も多少、見切れているのですがコチラはそれほど気になりませんので、もし直るのであれば、ついでに修正したいところです。
サムネイルに関してはやはり見栄えが悪いので、早急に修正したく思います。
URL: https://www.rakuten.ne.jp/gold/dreamhats/
よろしくお願い致します。###HR######IMG0914d6e225c324e6db1e2a948231bad37.pngIMG0###

Answer

ECマスターズの田辺です。






こちらの height: 87px; の高さが足りないことにより
サムネイルが見切れておりますので
 height: 150px; などにご変更をお願いいたします。


メイン画像も同様に高さが足りませんので、





height: 476px; を
height: 500px; などにご変更くださいませ。

Answer

$(document).ready(function(){
  $('.bxslider').bxSlider({
  auto: true,//自動切り替えの有無
  pause:6000,//停止時間※デフォルトは4000
  speed:1000,//動くスピード※デフォルトは500
  minSlides: 3,//一度に表示させる画像の最小値
  maxSlides: 3,//一度に表示させる画像の数
  slideWidth: 600,
  slideHeight: 600,
  slideMargin: 10,
  pager: true,
  prevText: '＜',
  nextText: '＞',
});
});


と


$(document).ready(function(){
//メインスライド用
  $('.bxslider01').bxSlider({
    auto: true,//自動切り替えの有無
  pause:4000,//停止時間※デフォルトは4000
  speed:1200,//動くスピード※デフォルトは500
  pagerCustom: '#bx-pager',  //ページャーをサムネイルにする
  controls:false//前後の矢印を消す
  });
});

//サムネイルのカールセル用
$(document).ready(function(){
  $('.bxslider02').bxSlider({
  pager:false,
  minSlides: 4,  //１スライド内のサムネイルの数
  maxSlides: 4,  //１スライド内のサムネイルの最大数
  slideWidth: 600,  //サムネイルの横幅（単位はpx）
  slideHeight: 600,  ｃｃ//サムネイルの縦幅（単位はpx）
  slideMargin: 45,  //サムネイル間の余白（単位はpx）
  nextSelector: '#NextIcon',  //"次へ”矢印をカスタマイズするための記述
  prevSelector: '#PrevIcon'//"前へ”矢印をカスタマイズするための記述
      });
});


どちらにも、既に書いてあるスタイルシート？を参考にしつつ、Height: 600という旨を加筆してみましたが、変化がありません。どうすればよいか、教えていただけますでしょうか？

Answer

そもそも関係ありそうなHTML CSS ともにどこにも、height: 87px;　height: 476px;　などという数値が見つかりません。
jquery.bxslider.cssというCSSが同サーバーにあるので、こちらでもheightと名の付くすべてのステータスをいじってみましたが、全く変化ありません。
ちなみに、ページ全体のスタイルシートに下記のような記述がありましたので指定の数値を入れてみたところ、全く変化ありません。

/*スライダー
--------------------------------------*/


div.slider {
	width: 1100px;
	display: block;
	margin-top: -20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 40px;
}
 
ul.bxslider01 li {/*メインスライダー*/
    display:block;
    width:1100x;
    height:auto;
}
 
ul.bxslider01 li img{
    display:block;
    width:1100px;
    height:auto;
}
 
ul.bxslider02 li a {/*サムネイル*/
    display:block;
    width:200px;
    height:auto;
}
 
ul.bxslider02 li a img{/*サムネイルの画像*/
    display:block;
    width:200px;
    height:auto;
}
 
div.controlWrap {
    width:1100px;
    display:block;
    position:relative;
    margin:0 auto;
}
 
div.controlWrap p#PrevIcon a{/*矢印画像（前へ）*/
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    background: url(../images/left.png) left center no-repeat;
    color:#fff;
    top:20px;
    left:20px;
    text-indent:-9999px;
}
 
div.controlWrap p#NextIcon a{/*矢印画像（次へ）*/
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	background-repeat: no-repeat;
	background-position: left center no-repeat;
	color: #fff;
	top: 20px;
	right: 20px;
	text-indent: -9999px;
	background-image: url(../images/right.png);
}

Answer

ECマスターズの田中です。

私にて確認したところ、
少なくとも、メインおよびサムネイルの見切れについては、
添付画像の通り、解決しているようにお見受けしましたが、
間違いなどございませんでしょうか。

もし、ｄｈさんのブラウザにて、
未だに見切れが発生するようでしたら、

・スーパーリロードを行う
https://liginc.co.jp/web/tool/browser/47339
・ブラウザの設定画面から、キャッシュを削除する
・普段ご利用されているブラウザ以外のブラウザ・PC（またはスマートフォン）で表示

といった方法で、最新の状態のページを改めてご確認いただけますでしょうか。

もし、サムネイル間の余白など、
さらに想定外のデザインを修正したい、などのご希望がございましたら、
改めてご返信いただきますようお願いします。###HR######IMG073a5c212ebc66cb313ff9e2a870aa96b.pngIMG0######BR###