[jQuery] bxSlider: レスポンシブコンテントスライダー

memo.

[markdown]
> * [jQuery Content Slider | Responsive jQuery Slider | bxSlider](http://bxslider.com/)
> * [stevenwanderski/bxslider-4](https://github.com/stevenwanderski/bxslider-4)

## License

MIT

## Browser Support

Firefox, Chrome, Safari, iOS, Android, IE7+

## Installation

似たようなコンポーネントがいくつかあるが、おそらくこれが本家。

“`prettyprinted
% bower info bxSlider
bower cached git://github.com/wandoledzep/bxslider-4.git#4.1.2
bower validate 4.1.2 against git://github.com/wandoledzep/bxslider-4.git#*
{
name: ‘bxslider-4’,
version: ‘4.1.2’,
homepage: ‘http://bxslider.com’,
license: ‘MIT’,
main: [
‘jquery.bxslider.js’,
‘jquery.bxslider.css’,
‘images/bx_loader.gif’,
‘images/controls.png’
],
keywords: [
‘bxslider’,
‘javascript’,
‘jquery’,
‘library’
],
ignore: [
‘**/.*’,
‘*.md’
],
dependencies: {
jquery: ‘>=1.6’
}
}
Available versions:
– 4.1.2
You can request info for a specific version with ‘bower info bxSlider#‘
“`

## Usage

CSS と JavaScript を設置する。

“`html “`

“`javascript



“`

## Config

オプションに関しては、[公式](https://github.com/stevenwanderski/bxslider-4)に記載がありますが、こちらが参考になりました。

> * [レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置 | Stronghold](http://zxcvbnmnbvcxz.com/jquery-responsible-bxslider/)
> * [簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。 | wordpress＆Me](http://wp-and.me/bxslider/)
> * [レスポンシブWebデザインの制作現場でよくつかうjQueryスライドショーのサンプルコード | SRE BLOG](http://www.sr-engine.com/blog/web-design/jquery/jquery-slider-code-sample.php)

その他調整が必要だったところ。

### イメージまわりの余分な余白を消す

CSS reset していれば起こらないけれども、なければ。

“`css
ul.bxslider {
margin: 0;
padding: 0;
}
“`

### イメージに付けられた写真のような装飾を取り除く

`jquery.bxslider.css` 内にテーマ設定がされていました。
特に on/off の設定はないようなので、CSS を上書きします。
この部分の設定を上書き、例えば `border: 0;` で消せました。

“`css
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: solid #fff 5px;
left: -5px;
background: #fff;
}
“`

> * [whitespace – Bxslider Unwanted Top & Bottom White Space – Stack Overflow](http://stackoverflow.com/questions/18601896/bxslider-unwanted-top-bottom-white-space)
[/markdown]