Foundationのスライダーをサムネイル付きにする方法

スポンサーリンク

Foundationは、CSSフレームワークの一つです。すっかりBootstrapに押されていますが、FoundationはjQuery的な機能が充実しているので、最近ちょいちょい導入しています。

で、そのFoundationの機能の一つである、「Orbit Slider」というスライダー機能。

2014/8/26更新:どういうわけか、Orbitは「非推奨」となりました!今後はサポート外、外部スライダーを使うべしとのことです。うーん、残念。

Orbit Slider - Foundation5

これはキャプチャなので動きません。動くのはこちら

今回、それをサムネイル付きにしたのでメモしておきます。

もくじ

  1. 基本のOrbit Sliderの記述のしかた
  2. サムネイルのコーディング
  3. スライドのカスタマイズ
  4. まとめ

1. 基本のOrbit Sliderの記述のしかた

Foundationの基本機能にあるスライダーは、普通のスライダーのjQueryプラグインなどの書き方とほぼ同じで、リストタグの中に画像を入れます。

あとは、ulタグにdata-orbitを入れておくだけでOK。

</pre>
<ul data-orbit="">
	<li><img src="photo1.jpg" alt="" /></li>
	<li><img src="photo2.jpg" alt="" /></li>
	<li><img src="photo3.jpg" alt="" /></li>
</ul>
<pre>

キャプションも簡単につけられますし、自動で全枚数や次の画像に切り替わるタイマーなどが出るので、既にこれだけでも便利。 詳しくはFoundationのサイトへどうぞ。

Orbit – Foundation Docs

2. サムネイルのコーディング

Foundationの説明ではサムネイルの記述方法はありませんが、「Deep Linking」という項目での解説がヒントになります。

  • 各スライドのリストにdata-orbit-slideという属性をつける
  • リンクにはdata-orbit-linkという属性をつける

このDeep Linkingではテキストのスライダーのコードしかないのですが、この指定の属性を付けると、ちょっとサムネイル風になるっぽいことが伺えます。

Orbit Slider - Deep linking - Foundation

そんなわけで、これを元に作ってみました。

</pre>
<div class="orbit-container">
<ul data-orbit=""><!--スライダー本体-->
	<li data-orbit-slide="slide1"><img src="photo1.jpg" alt="" /></li>
	<li data-orbit-slide="slide2"><img src="photo2.jpg" alt="" /></li>
	<li data-orbit-slide="slide3"><img src="photo3.jpg" alt="" /></li>
</ul>
<ul class="small-block-grid-4"><!--サムネイル-->
	<li><a data-orbit-link="slide1"><img src="photo1.jpg" alt="" /></a></li>
	<li><a data-orbit-link="slide2"><img src="photo2.jpg" alt="" /></a></li>
	<li><a data-orbit-link="slide2"><img src="photo3.jpg" alt="" /></a></li>
</ul>
</div>
<pre>

7~11行目がサムネイルの表示をさせているコードですが、そのulのクラスに、Block Gridを使っているのがミソです。

Block Grid – Foundaion

1行中に表示させたいサムネイルの数を変えたい場合は、**-block-grid-*の数字部分を変えます。

例えば、上記コードではsmall-block-grid-4としているので、全ての画面サイズにおいて、1行あたり4枚のサムネイルが表示されることになります。

3. スライドのカスタマイズ

FoundationのOrbit Sliderは、デフォルトでは「自動切換えタイマー」「ビュレット(画像下の丸いやつ)あり」「画像の切り替えタイプ:スライド」というように、仕様が固定されています。これらはカスタマイズが可能です。

サムネイルがある場合は、ビュレットなんかは要りませんしね。

3-1. スクリプトを読み込む

スライドの挙動をカスタマイズする場合は、新たにスクリプトを読み込む必要があります。 下のスクリプト読み込みコードの中の、上2つは標準のFoundationの機能を使う場合のスクリプトの読み込みです。それに3行目のスクリプトを追加します。

<script src="js/vendor/jquery.js"></script><script src="js/foundation/foundation.js"></script><script src="js/foundation/foundation.orbit.js"></script>

これらは、</body>の直前などに記述してファイルを読み込みます。

WordPressユーザーなら、wp_enqueque_scriptで呼び出しましょう(当然ですが、このファイルが既にテーマ内にあることが前提)。

3-2. スライドのulに属性を追加する

次に、カスタマイズを加えたい内容として、ulにdata-options属性を追加します。

例えば、「ビュレットなし」「自動切換えなし」にする場合は、data-options="bullets:false; timer:false;をスライダー本体部分のulに属性を加えます。

</pre>
<ul data-orbit="" data-options="bullets:false; timer:false;"><!--スライダー本体-->
	<li data-orbit-slide="slide1"><img src="photo1.jpg" alt="" /></li>
	<li data-orbit-slide="slide2"><img src="photo2.jpg" alt="" /></li>
	<li data-orbit-slide="slide3"><img src="photo3.jpg" alt="" /></li>
</ul>
<pre>

ここでは割愛しますが、アニメーションを「フェイド」にしたり、切り替えスピードを変えたり、かなり色々出来るようになっています。詳しくは以下からどうぞ。

Orbit Advanced – Foundation

4. まとめ

機能としては、やはりスライダー専用のjQueryプラグインのFlexslider2等に比べると、若干面倒ですし、サムネイルのカルーセル化に難があります(自分でjQueryを書けばいいんでしょうけど)。 とは言え、高機能を求めないのであれば、これで十分です。

何より、基本機能はFoundationのjQueryに入っているので、スクリプトの読み込み回数が減るのが魅力です。

コメントは受け付けていません。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.