bxsliderをカスタマイズするメモ

2017年7月14日jquery

忘備録

WEBページにスライダーを実装する機会は非常に多いだろう。
スライダーのスクリプトはjQuery依存型、非依存型、css3型など様々な種類の者がこれでもかという数が出回っていて、選択に迷ってしまう。

自分が理想としているものは、それほど高機能なものではない。むしろシンプルな方が良い。選ぶポイントは以下だ。

個人的にはslickみたいなものがスッキリしていて好みなのだが、これはレイアウトがずれてしまう事が多く、修正に時間がかかるのが難点だ。

時間があれば、新し目のものを試したいのだが、サクッと終わらせたいので結局は昔馴染みのFlexsliderやbxSliderを使うことになる。

この中で安定感がバツグンなのがbxsliderだろう。

これを自分好みにスタイリングしたい場合、cssと画像を少し弄ることになる。

良く使うのでメモる。

それなりびスタイルが施されたバックグラインドを持っているが、とにかく余計な背景や影を外したいのでcssを上書きする。

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

これで背景が透明になるが、もちろんbackgroundで好きな色に設定できる。セッティングで出来るかも知れないが未確認。

これは単純にimages/controls.pngを編集して好きな矢印のデザインにすれば良い。ホバーの処理はbackground-positionで行っているが、これを:hoverで透明度を変える形にしても良い。


body .bx-wrapper .bx-controls-direction a:hover{
opacity: 0.7;
}

画像を編集するのが面倒な場合、fontawesomeなどを利用しても良い。
この場合は起動時のセッティングで

$('.slides').bxSlider({
		prevText:'',
		nextText:'',
	});

これで好きなアイコンにする事ができる。
この場合注意しないといけないのが、デフォルトではテキストはtext-indent:9999px;で非表示にされている。これを


.bx-wrapper .bx-controls-direction a {
text-indent: 0px;
}

としてあげると表示される。font-sizeなどは適当に。

さらに矢印を左右に飛び出させたいとする。


.container .bx-wrapper .bx-controls-direction a.bx-prev{
    left:-5%;
}
.container .bx-wrapper .bx-controls-direction a.bx-next{
    right:-5%;
}

こうすると良い感じになる。
ただし、ウインドウサイズが小さい場合を考慮した記述を追加する必要がある。

cms / web engineering / UIUX / space planning