Javascript

Foundationで用意されているJavascriptの説明。

スライドショー Orbit

Foundationで用意されているスライドショーOrbitの使い方の説明。
現在では、公式では非推奨の機能のようで次期バージョンでは無くなっているかもしれません。代わりに公式サイトでは外部サイトの「Slick Carousel」が紹介されています。

スライドショーの設置

スライドショーの設置の基本

リストタグにデータ属性のdata-orbitを指定するだけです。
※データ属性はjavascriptで独自データを取得するために使われているものだと思われます。知識不足です。(独自データ属性、カスタムデータ属性とか呼ばれたりもするようです。)

  • slide 1
  • slide 2
  • slide 3
  • slide 4
      <ul data-orbit>
        <li><img src="img/orbit001.jpg" alt="slide 1" /></li>
        <li><img src="img/orbit002.jpg" alt="slide 2" /></li>
        <li><img src="img/orbit003.jpg" alt="slide 3" /></li>
        <li><img src="img/orbit004.jpg" alt="slide 4" /></li>
      </ul>
キャプション付き

リストの画像に続いて.orbit-captionを指定し、テキストを入れるとキャプション付きのスライドショーになります。

  • slide 1
    Caption 1
  • slide 1
    Caption 2
  • slide 1
    Caption 3
  • slide 1
    Caption 4
      <ul data-orbit>
        <li>
          <img src="img/orbit001.jpg" alt="slide 1" />
          <div class="orbit-caption">Caption One.</div>
        </li>
      </ul>
画像なしのスライドショー

画像なしでコンテンツをスライドショーにすることも可能です。
但し、スタイルを追加して余白の調整などしないとボタンの下などにコンテンツが表示されるので注意してください。(下記デモは調整した状態です。)

  • Headline 1

    Subheadline

  • Headline 2

    Subheadline

  • Headline 3

    Subheadline

      <ul class="example-orbit-content" data-orbit>
        <li>
          <div>
            <h2>Headline 1</h2>
            <h3>Subheadline</h3>
          </div>
        </li>
        ...
      </ul>

下記は上記の余白などを調整したCSSです。

      .example-orbit-content li div {
        color: white;
        background: #2ba6cb;
        padding: 30px 40px;
      }
ボタン付きのスライドショー

ボタン付きのスライドショーにすることも可能です。
リンクタグにデータ属性data-orbit-link="リンク先"を指定し、それぞれの該当のリストにdata-orbit-slide="リンク元"を指定します。

スライド 1 スライド 2 スライド 3
  • Headline 1

    Subheadline

  • Headline 2

    Subheadline

  • Headline 3

    Subheadline

      <a data-orbit-link="headline-1" class="small button">スライド 1</a>
      ...

      <ul class="example-orbit-content" data-orbit>
        <li data-orbit-slide="headline-1">
        ...
        </li>
      </ul>

スライドショーのカスタマイズ

標準では、自動切替や下部の●○表示のボタン、左上の番号の表示などが様々な物が表示、設定されています。
例えばスライドスピードを変更したり、下部の●○ボタンの非表示などをすることができます。データ属性data-options="設定"を指定することでカスタムできます。

下記は切替スピードの変更、左上の数字の非表示、下部の●○ボタンの非表示にした例です。"timer_speed: 2000; slide_number: false; bullets:false;"

  • Headline 1

    Subheadline

  • Headline 2

    Subheadline

  • Headline 3

    Subheadline

      <ul data-orbit data-options="timer_speed: 2000; slide_number: false; bullets:false;">
        <li>
        ...
        </li>
      </ul>

他にもたくさんのオプションがあるので公式サイトで確認してみてください。
ページ下部のAdvancedの箇所あります。

© 2015 foudation5-guide.com