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

公開日: 2014/05/30
更新日: 2018/12/03

memo.

Contents

License

MIT

Browser Support

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

Installation

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

% 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#<version>'

Usage

CSS と JavaScript を設置する。

  <link rel="stylesheet" type="text/css" href="/vendor/jquery.bxslider.css">

  <script src="/vendor/jquery.min.js"></script>
  <script src="/vendor/jquery.bxslider.js"></script>
  <script type="text/javascript">
  // bxSlider
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      mode: 'fade',
      speed: 3000,
      auto: true,
      pause: 10000,
      controls: false,
      pager: false
    });
  });
  </script>

Config

オプションに関しては、公式に記載がありますが、こちらが参考になりました。

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

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

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

ul.bxslider {
  margin: 0;
  padding: 0;
}

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

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

.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;
}