DEMO【bxSlider使用例】

CSSで外観を整えてみるサンプル1

  • デモイメージ1
  • デモイメージ2
  • デモイメージ3

1.まずはサイズ合わせ

とりあえず、外枠をつけてバランスを調整してみます。サンプルではスライダーを枠線用のdivで囲んでいますが、別に新しいdivを使わなくても、bx-wrapperにborder指定でも大丈夫です。

[prev]と[next]も必要に応じて変更できます。ページャーも中央横並びにすると、見やすく整理されていきます。
文字色やフォント変更、リンクの表示等を工夫すれば、十分にスライダーとして役割を果たしてくれそうです。

オプションでautoを指定すると、自動的にスライドが切り替わります。切り替えの速度等も変更可能。

CSSで外観を整えてみるサンプル2

  • デモイメージ1
  • デモイメージ2
  • デモイメージ3

2.control部分を調整する

[prev]と[next]を画像に変更した場合の例。サンプルでは35×35pxで簡単なボタン画像を用意してCSSの画像置換で表示しています。
text-indent: -9999pxでの画像置換はいろいろな意見がありますが、bx-Sliderのver.4では、デフォルトCSSの[prev][next]画像はこの手法で表示されているようです。

こちらのページャーは本家デザインにならって、CSS3のborder-radius(角丸)にて●表示に変えています。ただしIE8以前では●で表示されません。指定の色はそのままに、■表示になります。

CSSで外観を整えてみるサンプル3

  • デモイメージ1
  • デモイメージ2
  • デモイメージ3

3.modeを選ぶ『fade』

fadeの動きを指定した場合のサンプル。フェードでの画像切り替わりです。デフォルトの'horizontal(横スライド)'と比べて、クロスフェード効果はなんとなく柔らかい印象を受けますね。

[prev][next]をボタン画像ではなく、『<,>』に変更。CSS3のtext-shadowをかけてありますが無論IE8以前は以下略…。
このサンプルに限って言えば、シャドウの表示がなくなると、少し視認性に難のあるコントローラーになってしまいます(IE8以前では『<,>』が背景の白色に溶け込み過ぎて[prev][next]だと分かりにくくなっている)。

実際に使う場合は対応ブラウザを考慮して、色の指定や、配置する位置等で要調整。

CSSで外観を整えてみるサンプル4

  • デモイメージ1
  • デモイメージ2
  • デモイメージ3

4.modeを選ぶ『vertical』

mode:'vertical'は、縦スライドでの画像切り替わりです。使用するサイトのイメージや位置によっては、縦に動いた方が馴染む場合や、視線を集めやすいということもありそうです。

このサンプルのページャー表示はCSS3を使用せずに、■表示のままにしてあります。
ここでサンプルデモとして挙げているスライダーは、あんまり変わり映えのない印象ですが、うまく調整すればいろいろ雰囲気が変えられると思います…。