Roundaboutの使い方 roundabout

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

  • ※ jQueryのバージョンが1.7.2以上で$.easing 1.3プラグインを導入している場合、うまく動作しないことがあります。

公式サイト

対応ブラウザ IE6~10、Firefox、Safari、Chrome、Opera
jQuery バージョン1.2以上
ライセンス BSD license

ダウンロードと設置

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

以下を<head>内に記載します。
パスは環境により変更してください。

HTMLの設置

オプションの設定

オプション設定です。
以下のようなカタチで設定します。
オプションの種類はこちらをご覧ください。

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

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

オプション

オプション名 初期値 説明
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 レスポンシブに対応するかどうか

メソッド

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

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

イベント

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