多彩なエフェクトがステキなイメージスライダー「Nivo Slider」!

2011年6月4日 13:08 | JavaScript

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Check

多彩なエフェクトのイメージスライダーをかんたんに実装できるjQueryのプラグイン「Nivo Slider」がステキです。



軽量なJavaScriptで16種類の中からお好みのエフェクトを選んでスライドショーを実装できちゃいます。

↓ 16種類のエフェクトはこんな感じ。

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

↓ Nivo Slider は、こちらからダウンロードできます。
Nivo Slider – The Most Awesome jQuery Image Slider

で、そのままでも動作しますが、HTMLに下記のJavaScriptを追加して細部を調整すると、さらにステキです。

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', // エフェクトの種類
        slices:15, // エフェクトのスライスの数
        boxCols: 8, // エフェクトのボックスの数(横)
        boxRows: 4, // エフェクトのボックスの数(縦)
        animSpeed:500, // エフェクトの時間
        pauseTime:3000, // スライドの表示時間
        startSlide:0, // 初めに表示するスライド番号
        directionNav:true, // ナビボタンの表示・非表示
        directionNavHide:true, // マウスが画像から外れたときにナビボタンを非表示に
        controlNav:true, // コントロールナビボタンの表示・非表示
        controlNavThumbs:false, // コントロールナビボタンをサムネイルに
        controlNavThumbsFromRel:false, // imgタグのrelからサムネイルのファイル名を取得
        controlNavThumbsSearch: '.jpg', // サムネイルの拡張子
        controlNavThumbsReplace: '_thumb.jpg', // サムネイルの名前置き換え
        keyboardNav:true, // キーボードでナビ操作
        pauseOnHover:true, // マウスオーバーでスライドを停止
        manualAdvance:false, // マニュアルで設定
        captionOpacity:0.8, // キャプションの透明度
        prevText: 'Prev', 
        nextText: 'Next', 
        beforeChange: function(){}, // 画像が変わる前のスクリプト
        afterChange: function(){}, // 画像が変わった後のスクリプト
        slideshowEnd: function(){}, // スライドがすべて終わった後のスクリプト
        lastSlide: function(){}, // 最後の画像表示後のスクリプト
        afterLoad: function(){} // スライドロード後のスクリプト
    });
});
</script>

ちょーお手軽でカッコいいステキスライドショーでした。

関連記事

  1. facebookのiFrameページのスクロールバーを消したい!
  2. WordPressにかんたんにイメージスライダーを実装できちゃうプラグイン「Easing Slider」
  3. ページ送りがかんたんに実装できちゃうプラグイン「jQuery Pagination Plugin」
  4. facebookページをOAuth・HTTPS対応にしてみた!
  5. アクセスする度に画像をランダムに表示したい!
  6. フロートしたブロックをレンガ風に積み上げてくれるjQueryプラグイン「jQuery Masonry」を試してみた!
  7. jQueryでかっこいいイメージスライダー!
  8. 横からにゅ~っとオススメ記事を表示してくれちゃう「SimpleReach Slide」を入れてみた!
  9. ページ内リンクの動作をカッコ良いスクロールにしてくれちゃうプラグイン「SmoothScroll」
  10. WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加したい!

PageTop

うぇぶこんの人気エントリー

PageTop


Google+アカウント

facebookアカウント

ページトップへ