Roundaboutの使い方

Roundaboutの使用方法をご紹介しています。
Roundaboutはターンテーブルのように要素が回転するjQueryプラグインです。

公式サイト
Github

  • ※ このライブラリは、jQueryが別途必要です。
  • ※ jQueryのバージョンが1.7.2以上で$.easing 1.3プラグインを導入している場合、うまく動作しないことがあります。
対応ブラウザ IE6~10、Firefox、Safari、Chrome、Opera
jQuery バージョン1.2以上
ライセンス BSD license

ダウンロードと設置

こちらからダウンロードし解凍します。
解凍したJavaScriptファイルを任意の場所に設置します。

次の要素を<head>内に記述します。
パスは環境により変更してください。

HTML

適用方法

HTML

次のJavaScriptコードを記述します。

JavaScript

オプションの設定

$.roundaboutメソッドの第一引数にハッシュで各種オプションを指定できます。
オプションの種類はオプション一覧をご覧ください。

JavaScript

ドラッグまたはフリックの設定

ドラッグやフリックで回転させる方法です。
実装にはEvent.dragEvent.dropが必要です。

HTML

JavaScript

オプション一覧

オプション名 初期値 説明
bearing 0.0 初期の横方向の相対値
tilt 0.0 傾度
minZ 100 最小z-index
maxZ 280 最大z-index
minOpacity 0.4 最小不透明度
maxOpacity 1.0 最大不透明度
minScale 0.4 最小スケール
maxScale 1.0 最大スケール
duration 600 アニメーション時間
btnNext null 次へスライドする要素
btnNextCallback function() {} 次へスライドしたときのコールバック関数
btnPrev null 前へスライドする要素
btnPrevCallback function() {} 前へスライドした時のコールバック関数
btnToggleAutoplay null 自動再生の開始と停止の切り替えをする要素
btnStartAutoplay null 自動再生を開始するための要素
btnStopAutoplay null 自動再生を停止するための要素
easing "swing" イージング
clickToFocus true 要素をクリックするとスライドしてフォーカスをするかどうか
clickToFocusCallback function() {} 現在の要素以外の要素をクリックしてアニメーションが終了した後のコールバック関数
focusBearing 0.0 フォーカスしている軸の位置
shape "lazySusan" スライドの形状(参照
debug false デバッグモードの切り替え(デバッグモードにするとスライド要素に各情報が表示される。)
childSelector "li" 対象要素
startingChild 0 初期にフォーカスする要素のインデックス番号
reflect false スライドする方向(true = 時計回り、false = 反時計回り)
autoplay false 自動再生
autoplayInitialDelay 0 自動再生の開始遅延時間
autoplayDuration 1000 自動再生の間隔時間
autoplayPauseOnHover false ホバー時に自動再生を停止するかどうか(離れると自動再生が再度開始する)
enableDrag false ドラッグでスライドするかどうか
dropDuration 600 ドロップした時のスライドの速度
dropEasing "swing" ドロップした時のイージング
dropAnimateTo "nearest" ドロップした時の吸着する方向
dropCallback function() {} ドロップした時のコールバック関数
dragAxis "x" ドラッグできる方向
dragFactor 4 ドラッグでの移動速度(値が大きいほど移動する要素が少なくなる)
responsive false レスポンシブに対応するかどうか

メソッド

任意のタイミングで実行できるメソッドが用意されています。
メソッドの実行は$.roundaboutメソッドの第一引数に文字列でメソッド名を指定します。

JavaScript

メソッド名 説明
setBearing 初期の横方向の相対値を設定し初期の要素へ瞬時に移動
adjustBearing 現在の要素から横方向の相対値を与えられた分だけ変更
setTilt 傾度(角度)を変更
adjustTilt 現在の傾度(角度)から与えられた分だけ変更
animateToChild 指定インデックスの要素へ移動
animateToNextChild 次の要素へ移動
animateToPreviousChild 前>の要素へ移動
animateBearingToFocus 初期の横方向の相対値を設定し初期の要素へアニメーションしながら移動
startAutoplay 自動再生の開始
stopAutoplay 自動再生の停止
toggleAutoplay 自動再生の開始と停止
isAutoplaying 自動再生の状態
戻り値はtrueまたはfalse
changeAutoplayDuration 自動再生の間隔の切り替え
relayoutChildren 要素を初期の位置に戻す
getNearestChild 現在の要素のインデックス番号
getChildInFocus 現在の要素のインデックス番号
(アニメーション中はfalse)

詳細はroundaboutの公式ページをご覧ください。
Roundabout Callable Methods

イベント

イベントが用意されています。
$.roundaboutを適用した要素を$.onメソッドを使用して登録します。

JavaScript

メソッド名 説明
animationStart アニメーションの開始
animationEnd アニメーションの終了
autoplayStart 自動再生の開始
autoplayStop 自動再生の終了
childrenUpdated 要素が再配置中
reposition 位置が変化中
moveClockwiseThroughBack 時計回りで回転している時
moveCounterclockwiseThroughBack 反時計回りで回転している時