Orbit

JavaScript Motion UI

一個具有動畫支援和許多可自訂選項的圖片和內容輪播。

基礎

Orbit 不會自動為您產生任何 HTML，讓您能靈活地移動外掛程式的各個部分。以下是一個完整的範例—我們將在下方進一步分解各個部分。

請注意，除了 Javascript 之外，Motion UI 是 Orbit 正常運作的相依性。如果您不希望在輪播中使用任何動畫，您隨時可以停用動畫。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
          <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">
          <figcaption class="orbit-caption">Lets Rocket!</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">
          <figcaption class="orbit-caption">Encapsulating</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
          <figcaption class="orbit-caption">Outta This World</figcaption>
        </figure>
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0">
      <span class="show-for-sr">First slide details.</span>
      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
    </button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>

太空，最後的疆界。
火箭升空！
包覆
脫離世界

包裝器

包裝器容納整個輪播。我們使用 aria-label 屬性標示輪播是什麼，以供輔助技術使用。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
</div>

投影片容器

投影片容器容納每個個別投影片。在我們上述的標記範例中，我們也將按鈕放在這裡，以便我們將它們錨定到投影片容器的中心邊緣。但是，它們可以在 data-orbit 包裝器內的任何位置移動。

每個投影片都是一個具有類別 <li> 的 .orbit-slide。第一個投影片標記有類別 .is-active，表示它是預設值。您可以在投影片中放置任何想要的 HTML，但我們有一些預製的樣式，可用於帶有標題的基於影像的投影片。

<ul class="orbit-container">
  <li class="orbit-slide is-active">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </figure>
  </li>
  <!-- More slides... -->
</ul>

Orbit 控制項使用類別 .orbit-previous 和 .orbit-next。以下範例有一個重要的無障礙輔助功能：由於我們使用 ASCII 箭頭作為輪播控制項，因此我們加入了僅螢幕閱讀器可見的文字（包裝在類別 .show-for-sr 中），說明這些控制項的作用。

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>

項目符號

項目符號有兩個用途：它們標記目前的投影片，並且可以按一下它們來導覽到另一個投影片。與控制項一樣，項目符號也可以有螢幕閱讀器友善的標籤。

<nav class="orbit-bullets">
  <button class="is-active" data-slide="0">
    <span class="show-for-sr">First slide details.</span>
    <span class="show-for-sr" data-slide-active-label>Current Slide</span>
  </button>
  <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
  <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
  <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>

投影片內容

輪播投影片可以包含影像或 HTML，您甚至可以在一個輪播中混合投影片！

在影片中觀看此部分

<li class="orbit-slide">
  <div>
    <h3 class="text-center">2: You can also throw some text in here!</h3>
    <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    <h3 class="text-center">This Orbit slider does not use animations.</h3>
  </div>
</li>

這是 dodgerblue。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
這是 rebeccapurple。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
這是 darkgoldenrod。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
這是 lightseagreen。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

使用動畫

Orbit 使用 Motion UI CSS 類別來讓投影片在周圍動畫。

如果沒有在範本中包含 `motion-ui` [Motion UI](motion-ui.html) CSS 檔案，Orbit 滑桿將無法正常運作。

有四個外掛選項可以設定來變更預設效果

data-anim-in-from-left：投影片從左方進入時要播放的轉場。
data-anim-in-from-right：投影片從右方進入時要播放的轉場。
data-anim-out-to-left：投影片往左方離開時要播放的轉場。
data-anim-out-to-right：投影片往右方離開時要播放的轉場。

由於這些選項名稱相當長，你也可以使用 data-options 將它們全部設定在一個 HTML 屬性中

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

太空，最後的疆界。
火箭升空！
包覆
脫離世界

停用動畫

若要停用 Motion UI，請將外掛選項 useMUI 設定為 false。寫成 HTML 屬性，即為 data-use-m-u-i="false"。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
</div>

太空，最後的疆界。
火箭升空！
包覆
脫離世界

Sass 參考

變數

這個元件的預設樣式可以使用專案設定檔中的這些 Sass 變數自訂。

名稱	類型	預設值	說明
`$orbit-bullet-background`	顏色	`$medium-gray`	Orbit 子彈的預設顏色。
`$orbit-bullet-background-active`	顏色	`$dark-gray`	Orbit 子彈的預設作用中顏色。
`$orbit-bullet-diameter`	數字	`1.2rem`	Orbit 子彈的預設直徑。
`$orbit-bullet-margin`	數字	`0.1rem`	Orbit 子彈之間的預設邊界。
`$orbit-bullet-margin-top`	數字	`0.8rem`	Orbit 子彈與投影片區域的預設距離。
`$orbit-bullet-margin-bottom`	數字	`0.8rem`	Orbit 子彈與下方潛伏內容的預設底部邊界。
`$orbit-caption-background`	顏色	`rgba($black, 0.5)`	Orbit 標題的預設背景顏色。
`$orbit-caption-padding`	數字	`1rem`	Orbit 標題的預設內距。
`$orbit-control-background-hover`	顏色	`rgba($black, 0.5)`	Orbit 控制項滑鼠移入時的預設背景顏色。
`$orbit-control-padding`	數字	`1rem`	Orbit 控制項的預設內距。
`$orbit-control-zindex`	數字	`10`	Orbit 控制項的預設 z-index。

混合

我們使用這些混合來建構這個元件的最終 CSS 輸出。你可以自己使用混合，從我們的元件建構出自己的類別結構。

orbit-wrapper

@include orbit-wrapper;

新增 Orbit 外部包裝器的樣式。這些樣式用於 .orbit 類別。

orbit-container

@include orbit-container;

新增 Orbit 幻燈片內部容器的樣式。這些樣式用於 .orbit-container 類別。

orbit-slide

@include orbit-slide;

新增 Orbit 幻燈片個別幻燈片的樣式。這些樣式用於 .orbit-slide 類別。

orbit-image

@include orbit-image;

新增包含影像的幻燈片的樣式。這些樣式用於 .orbit-image 類別。

orbit-caption

@include orbit-caption;

新增 Orbit 幻燈片標題的樣式。這些樣式用於 .orbit-caption 類別。

orbit-control

@include orbit-control;

新增 Orbit 幻燈片中上一個/下一個按鈕的基本樣式。這些樣式在預設 CSS 中的 .orbit-next 和 .orbit-previous 類別之間共用。

orbit-previous

@include orbit-previous;

新增 Orbit 上一個按鈕的樣式。這些樣式用於 .orbit-previous 類別。

orbit-next

@include orbit-next;

新增 Orbit 下一個按鈕的樣式。這些樣式用於 .orbit-next 類別。

orbit-bullets

@include orbit-bullets;

新增 Orbit 子彈容器的樣式。新增 Orbit 上一個按鈕的樣式。這些樣式用於 .orbit-bullets 類別。

JavaScript 參考

初始化

若要使用這個外掛程式，您的 JavaScript 中必須包含下列檔案

foundation.core.js
foundation.orbit.js
- 包含工具程式庫 foundation.util.keyboard.js
- 包含工具程式庫 foundation.util.motion.js
- 包含工具程式庫 foundation.util.timer.js
- 包含工具程式庫 foundation.util.imageLoader.js
- 包含工具程式庫 foundation.util.touch.js

Foundation.Orbit

建立 Orbit 輪播的新執行個體。

var elem = new Foundation.Orbit(element, options);

名稱	類型	說明
`element`	jQuery	要製成 Orbit 輪播的 jQuery 物件。
`options`	物件	覆寫預設外掛程式設定。

外掛程式選項

使用這些選項自訂 Orbit 執行個體。外掛程式選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛程式建構函式的物件。深入了解 JavaScript 外掛程式的初始化方式。

名稱	類型	預設	說明
`data-bullets`	`布林值`	`true`	告訴 JS 尋找並載入子彈。
`data-nav-buttons`	`布林值`	`true`	告訴 JS 將事件監聽器套用至導覽按鈕
`data-anim-in-from-right`	`字串`	`slide-in-right`	要套用的 motion-ui 動畫類別
`data-anim-out-to-right`	`字串`	`slide-out-right`	要套用的 motion-ui 動畫類別
`data-anim-in-from-left`	`字串`	`slide-in-left`	要套用的 motion-ui 動畫類別
`data-anim-out-to-left`	`字串`	`slide-out-left`	要套用的 motion-ui 動畫類別
`data-auto-play`	`布林值`	`true`	允許 Orbit 在頁面載入時自動執行動畫。
`data-timer-delay`	`數字`	`5000`	幻燈片轉場之間的時間量（毫秒）
`data-infinite-wrap`	`布林值`	`true`	允許 Orbit 無限循環幻燈片
`data-swipe`	`布林值`	`true`	允許 Orbit 幻燈片繫結至行動裝置的滑動事件，需要額外的公用程式函式庫
`data-pause-on-hover`	`布林值`	`true`	允許計時函式在滑動時暫停動畫。
`data-accessible`	`布林值`	`true`	允許 Orbit 將鍵盤事件繫結至滑桿，以箭頭鍵執行動畫畫面
`data-container-class`	`字串`	`orbit-container`	套用至 Orbit 容器的類別
`data-slide-class`	`字串`	`orbit-slide`	套用至個別幻燈片的類別。
`data-box-of-bullets`	`字串`	`orbit-bullets`	套用至子彈容器的類別。不客氣。
`data-next-class`	`字串`	`orbit-next`	套用至「下一頁」導覽按鈕的類別。
`data-prev-class`	`字串`	`orbit-previous`	套用至「上一頁」導覽按鈕的類別。
`data-use-m-u-i`	`布林值`	`true`	布林值，標記 js 是否使用 motion ui 類別。預設為 true，以維持向後相容性。

事件

這些事件會從附加 Orbit 外掛程式的任何元素觸發。

名稱	說明
`beforeslidechange.zf.orbit`	在下一張幻燈片開始執行動畫之前觸發，而且僅在找到下一張幻燈片時觸發。
`slidechange.zf.orbit`	在幻燈片完成執行動畫時觸發。

方法

geoSync

$('#element').foundation('geoSync');

在 orbit 上設定一個 timer 物件，並為下一張幻燈片開始計時。

_reset

$('#element').foundation('_reset');

重設 Orbit，以便重新初始化

changeSlide

$('#element').foundation('changeSlide', isLTR, chosenSlide, idx);

將目前的幻燈片變更為新的幻燈片。

觸發這些事件： Orbit#event:slidechange

名稱	類型	說明
`isLTR`	布林值	如果為 true，幻燈片將從右向左移動；如果為 false，幻燈片將從左向右移動。
`chosenSlide`	jQuery	如果已選取，則為要顯示的下一張幻燈片的 jQuery 元素。
`idx`	數字	如果已選取，則為新幻燈片在其集合中的索引。

_destroy

$('#element').foundation('_destroy');

銷毀旋轉木馬並隱藏元素。

基礎

包裝器

投影片容器

下一頁/上一頁箭頭

項目符號

投影片內容

使用動畫

停用動畫

Sass 參考

變數

混合

orbit-wrapper

orbit-container

orbit-slide

orbit-image

orbit-caption

orbit-control

orbit-previous

orbit-next

orbit-bullets

JavaScript 參考

初始化

Foundation.Orbit

外掛程式選項

事件

方法

geoSync

_reset

changeSlide

_destroy