Nivo Slider


Description: エフェクトの豊富なスライドギャラリーです。昔のFlashライクなエフェクトでマークアップも簡単なので導入も手軽です。IE6での挙動はやや不安定です。キャプションはHTML形式でもimgへのタイトルでも可能です。また、サムネイルを利用することも出来ます。
Sample: demo
Tutorial: Nivo Slider
License: -
WordPress Plugin: WP Nivo Slider

Sample

HTML形式でキャプション表示も可能なのでリンク装飾も出来ます。

Note

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:3000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
    });
});
</script>

セットアップは上記のように行う。

Related snippet :

  • Description: シンプルで多彩なスライダー。画像周りに無駄な装飾がないので既存のデザインにしっくり納められる汎用性がありますね。クロスブラウザで動作してくれます。m ...
  • Description: iTuneライクなスライダーを手軽なコードで実装します。IEだとちょっと微妙ですね・・・サムネイル付きで画像の切り替わりと連動してサムネイルも動きま ...
  • Description: RSSを読み込んでツールチップ付きのニュースティッカーを実装するプラグインです。動的で省スペース。なかなか効果的ではないでしょうか。クロスブラウザで ...
  • Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。 Sample: ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: 省スペースにイメージギャラリーを設置することが可能なプラグインです。コンパクトながらなかなか高機能で、デザインを崩すこと無くギャラリーを導入できる点 ...
  • Description: 多くの形に対応できる高機能コンテンツスライダープラグインです。テキストなどや画像ギャラリー、上記画像のようなサムネイルギャラリーなども構築可能。表示 ...