bxsliderのドロップシャドウやボーダーを消したい時はこの方法

jQueryを使ったスライダー系プラグインとしてよく使われるbxsliderにはデフォルトのままでも綺麗な表示になるようにスタイルシートが付属している。
HTMLにあまり詳しくない人や初心者にはとても便利なのだが、自分でスタイルを設定したい時に邪魔になるものもある。

例えば、スラーダー全体に付けられるドロップシャドウ、そしてスライドする写真の下地となる白の背景など。

どちらも
jquery.bxslider/jquery.bxslider.css
のファイル内で指定しているので該当箇所を変更すれば良いのだが、bxsliderのバージョンアップを考え、ページ本体のスタイルシートに必要なコードを追加するのがおススメ。

スタイルシートに追加するのはこれ

.bx-wrapper .bx-viewport {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border:none;
background-color:transparent;
}

これだけで、bxsliderのドロップシャドウが消え、画像の背景色が無くなる。

ちなみに、背景色の縁取りは残しておきたい時は、

background-color:transparent;

の行を削除する。

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク