[jQuery] Supersized: フルスクリーンスライドショー

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

memo.
このプラグインが定番らしい。

メンテナンスが止まっているような気もする。

Contents

License

MIT/GPL

Browser Support

公式サイトで情報が見つからなかった。
Firefox, Chrome, Safari, iOS, (Android), IE6+

Installation

bower にコンポーネントがありました。

% bower info supersized
bower not-cached    git://github.com/buildinternet/supersized.git#*
bower resolve       git://github.com/buildinternet/supersized.git#*
bower checkout      supersized#master
bower resolved      git://github.com/buildinternet/supersized.git#2ccedfdb01
{
  name: 'supersized',
  homepage: 'https://github.com/buildinternet/supersized'
}
No versions available.

Usage

CSS と JavaScript を設置する。

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

  <script src="/vendor/jquery.min.js"></script>
  <script src="/vendor/jquery.easing.min.js"></script>
  <script src="/vendor/supersized.3.2.7.min.js"></script>
  <script type="text/javascript">
  $(function($){
      $.supersized({
          slide_interval : 10000,
          transition : 1,
          transition_speed : 3000,
          slides : [
              { image : '/img/01.jpg' },
              { image : '/img/02.jpg' },
              { image : '/img/03.jpg' },
          ]
      });
  });
  </script>

Config