カルーセルスライダーってたくさんありますが
本日は、ターンテーブルのように画像がくるくる回転するjQueryプラグイン「roundabout」の紹介です。
サンプルはここです。
まずは、ここからjsをダウンロード。
Jquery本体は、いつものごとくGoogleのCDN サービスを利用。
ダウンロードしたら「head」部分で読み込み。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.roundabout.min.js" type="text/javascript"></script>
HTML内の表示したい箇所に、
たとえば画像６枚をくるくる回したい場合は
<ul id="sample">
<li><img src="images/image_round1.jpg" width="500" height="200" alt="テスト表示01" /></li>
<li><img src="images/image_round2.jpg" width="500" height="200" alt="テスト表示02" /></li>
<li><img src="images/image_round3.jpg" width="500" height="200" alt="テスト表示03" /></li>
<li><img src="images/image_round4.jpg" width="500" height="200" alt="テスト表示04" /></li>
<li><img src="images/image_round5.jpg" width="500" height="200" alt="テスト表示05" /></li>
<li><img src="images/image_round6.jpg" width="500" height="200" alt="テスト表示06" /></li>
</ul>
と記載する。
クリックで別ページ等にリンクしたい場合は普通に「a href="#"」で囲む。
ただ、これだと自動的に再生されないのでオプションを好みに応じて指定。
これはHead内記載でも良いし、別ファイルにjsを記載してリンクさせてもＯＫ。
スピードや傾斜角の調整でいろいろな形に表示できます。
$(document).ready(function() {
$('#myRoundabout').roundabout({
tilt : -1, //傾度
minOpacity : 0.1, //最小不透明度
minScale : 0.1, //最小スケール
autoplay : true, //自動再生
autoplayDuration : 5000, //自動再生の間隔時間
autoplayPauseOnHover : true, //ホバー時に自動再生を停止するかどうか
btnNext: "#next", //次へスライドする要素
btnPrev: "#prev" 前へスライドする要素
});
});
あとは、CSSで微調整
たとえば
/* calrse */
#myRoundabout {padding: 0;}
#myRoundabout ul {
list-style: none;
margin: 0;
}
#myRoundabout li {
list-style-type: none;
}
.roundabout-holder {/*全体表示幅*/
list-style: none;
width: 51.25em;
height: 13.5em;
margin: auto;
}
.roundabout-moveable-item {/*アイテムの大きさ*/
height: 12.5em;
width: 31.25em;
cursor: pointer;
}
.roundabout-moveable-item img {/*画像の大きさ*/
height: 12.5em;
width: 31.25em;
border: none;
}
.roundabout-in-focus { cursor: auto; };
こんな感じでＯＫ．
ただし、なぜかCSSのサイズ調整はpxでは効かないのでemで。
その他のオプションは下記です。
オプション名／初期値／説明
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／レスポンシブに対応するかどうか
