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

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

2009年05月18日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Plugins | jQuery Plugins

高速に動作する画像カルーセルUI実装用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>

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

関連エントリ

関連の記事検索:jQuery, JavaScript, スライドショー, Webデザイン
スポンサード リンク

By.KJ : 2009年05月18日 11:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)