高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」:phpspot開発日誌

前の記事 ≪：美しい光のエフェクトを画像に加えるPhotoshopチュートリアル集
次の記事 ≫：2009年5月18日管理人のブックマーク

高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」

2009年05月18日-

スポンサードリンク

Plugins | jQuery Plugins

高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」

ページ右上のページ送りボタンを押せば滑らかに、かつ高速にアニメーションします。

スクリプトはシンプルでありながら、オプション指定が色々とできてカスタマイズ性がある以下のようなコードで実装できます

<script type="text/javascript">
$('#slide_holder').agile_carousel({
    disable_on_first_last: "yes",
    next_prev_buttons: "yes",
    number_slides_visible: "3",
    slide_buttons: "yes",
    slide_captions: "Agile Carousel: View Examples With Varied Settings|Agile Carousel: View Examples With Varied Settings|Agile Carousel: View Examples With Varied Settings|Agile Carousel: Project Hosted on Code.Google.com | Agile Carousel: Project Hosted on Code.Google.com | Agile Carousel: Project Hosted on Code.Google.com | Agile Carousel: Powered by PHP, JQuery & JQuery UI | Agile Carousel: Powered by PHP, JQuery & JQuery UI | Agile Carousel: Powered by PHP, JQuery & JQuery UI",
    timer_on: "no",
    transition_duration: 1500,
    transition_easing: "easeOutQuint"
});
</script>

サイトデザインのページ上部なんかに置いてスペースを有効利用できそうなウィジェットが簡単に実装できますね。

関連エントリ