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;

の行を削除する。