Foundation-orbit-javascript-reference
Foundation-メディアJavaScriptリファレンス
説明
Foundationは、以下にリストするように、軌道にJavaScriptコンポーネントを提供します。
初期化中
orbitプラグインを使用するには、foundation.core.js _、 foundation.orbit.js_ファイルをJavaScriptに含める必要があります。 このプラグインには、次のユーティリティライブラリが必要です-
- foundation.util.keyboard.js
- foundation.util.motion.js
- foundation.util.timerAndImageLoader.js
- foundation.util.touch.js
Foundation.Orbit
軌道のカルーセルの新しいインスタンスを作成するために使用されます。
var elem = new Foundation.Orbit(element);| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
element カルーセルにするjQueryオブジェクトです。 |
jQuery |
| 2 |
options プラグインのデフォルト設定を上書きします。 |
Object |
プラグインオプション
これらを使用して、軌道のインスタンスをカスタマイズできます。 個別のデータ属性、1つのマージされた_data-options_属性、またはプラグインのコンストラクターに渡されるオブジェクトとして設定できます。 次の表に、Foundationで使用されるプラグインオプションを示します。
| Sr.No. | Name & Description | Example |
|---|---|---|
| 1 |
bullets JSに弾丸をロードするよう指示します。 |
true |
| 2 |
navButtons イベントリスナをナビゲーションボタンに追加するようにJSに指示します。 |
true |
| 3 |
animInFromRight 適用されるmotion-uiアニメーションクラス。 |
'slide-in-right' |
| 4 |
animOutToRight 適用されるmotion-uiアニメーションクラス。 |
'slide-out-right' |
| 5 |
animInFromLeft 適用されるmotion-uiアニメーションクラス。 |
'slide-in-left' |
| 6 |
animOutToLeft 適用されるmotion-uiアニメーションクラス。 |
'slide-out-left' |
| 7 |
autoPlay これにより、ページのロード時に軌道が自動的にアニメーション化されます。 |
true |
| 8 |
timerDelay スライドの移行に適用される時間をミリ秒単位で表します。 |
5000 |
| 9 |
infiniteWrap スライドを介して無限にループします |
true |
| 10 |
swipe オービットスライドを使用して、モバイルのスワイプイベントをバインドできます。 |
true |
| 11 |
pauseOnHover これにより、タイミング関数でホバリング時にアニメーションを一時停止できます。 |
true |
| 12 |
accessible キーボードイベントをスライダーにバインドします。 |
true |
| 13 |
containerClass 軌道のコンテナに適用されるクラス。 |
'orbit-container' |
| 14 |
slideClass 軌道の個々のスライドに適用されるクラス。 |
'orbit-slide' |
| 15 |
boxOfBullets 弾丸のコンテナに適用されるクラス。 |
'orbit-bullets' |
| 16 |
nextClass 次のボタンに適用されるクラス。 |
'orbit-next' |
| 17 |
prevClass 前のボタンに適用されるクラス |
'orbit-previous' |
| 18 |
useMUI JSがモーションUIクラスを使用するかどうかを示すブール値を設定します。 後方互換性のため、デフォルトはtrueです。 |
true |
イベント
これらのイベントは、プラグインが添付された要素からトリガーされます。 _slidechange.zf.orbit_は、スライドによってアニメーションが終了すると起動します。
関数
_.geoSync_は_timer_オブジェクトを設定し、次のスライドのカウンターを開始します。
.changeSlide
スライドを新しいものに変更します。 スライドの変更に対して_Orbit＃event_イベントをトリガーします。 次の表に、トリガーされるイベントを示します。
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
isLTR スライドが左から右に移動する必要がある場合にフラグを立てます。 |
Boolean |
| 2 |
chosenSlide スライドのjQuery要素は、選択されたときに次に表示されます。 |
jQuery |
| 3 |
idx コレクションの新しいスライドインデックスが選択されている場合、それを表します。 |
Number |
_.destroy_はカルーセルを破棄し、要素を非表示にします。
