Q&A
ありがとうございます。
対応してみましたが、全くの無反応でした、、、
原因は何かわかりますでしょうか。
やりたいこと
・bx-sliderのクラスを当てている、メインビジュアルをフェードでスライドショーを行うこと
結果
動きはできているが、メインビジュアルの外枠に不自然な空白ができている
対応
検証ツールで確認すると、bx-sliderの実装時に、bx-wrapperというスタイルが勝手に当てられていたようで、border: 5px solid #fff;の5px分余計な隙間が生まれていることを確認。
→.bx-wrapper{
-moz-box-shadow: 0 0 0px #ccc;
-webkit-box-shadow: 0 0 0px #ccc;
box-shadow:none;
border:none;
margin-bottom: 0;
}
上記のスタイルをcssファイルに書いてみて、消そうとするも効果なし。
どなたか知恵をお貸しください、、、よろしくお願いします。
このコードが原因であると思われます、自分のcssファイルには書いていないコードです。 .bx-wrapper { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; background: #fff; コード
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade', auto: true, controls: false, speed:4000, startSlide: 1, pager: false, }); }); </script> </head> <body> <header> <ul class="bxslider"> <li class="hero-image1"> <img src="image/メインビジュアル1.jpeg" alt="メインビジュアル1"> </li> <li class="hero-image2"> <img src="image/メインビジュアル2.jpeg" alt="メインビジュアル2"> </li> <li class="hero-image3"> <img src="image/メインビジュアル3.jpg" alt="メインビジュアル3"> </li> </ul> コード
検証ツールで確認したコード <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 357px;"><ul class="bxslider" data_liveedit_tagid="0x00007fc1a6f20840" style="width: auto; position: relative;"> <li class="hero-image1" data_liveedit_tagid="0x00007fc1a6f20aa0" aria-hidden="true" style="float: none; list-style: none; position: absolute; width: 1197px; z-index: 0; display: none;"> <img src="image/メインビジュアル1.jpeg" alt="メインビジュアル1" data_liveedit_tagid="0x00007fc1a6f20d00"> </li> <li class="hero-image2" data_liveedit_tagid="0x00007fc1a6f21070" aria-hidden="true" style="float: none; list-style: none; position: absolute; width: 1197px; z-index: 0; display: none;"> <img src="image/メインビジュアル2.jpeg" alt="メインビジュアル2" data_liveedit_tagid="0x00007fc1a6f212d0"> </li> <li class="hero-image3" data_liveedit_tagid="0x00007fc1a6f21640" aria-hidden="false" style="float: none; list-style: none; position: absolute; width: 1197px; z-index: 50;"> <img src="image/メインビジュアル3.jpg" alt="メインビジュアル3" data_liveedit_tagid="0x00007fc1a6f218a0"> </li> </ul></div></div> コード
検証ツールで確認したコード .bx-wrapper { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; background: #fff; } .bx-wrapper { position: relative; margin-bottom: 60px; padding: 0; *zoom: 1; -ms-touch-action: pan-y; touch-action: pan-y; } コード
回答2件
0
わからんけど優先順位が足りないんじゃ？id足すとか
あと「緊急」はやめておいたほうがいい、回答する気が失せる。
css
1.bxslider .bx-wrapper { 2 background-color: transparent; 3 margin: 0px auto; 4 border: none; 5 box-shadow: none; 6} 7.bxslider .bx-wrapper img { 8 display: block; 9 margin: 0px auto; 10}
投稿2020/06/14 13:26
編集2020/06/14 13:27
総合スコア3830
0
ベストアンサー
jQuery導入しているならbody閉じタグの直前に
html
1<script> 2 3$('.bx-wrapper').css('border', 'none'); 4 5</script>
応急的な処置なので、別途しっかりと対策する必要はありそう。
投稿2020/06/14 13:13
編集2020/06/14 13:14
総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。