Nivo Sliderのスライドショー(jQueryプラグイン)

カールおじさんやニモの画像でスライドショーのデモが見れるNivo Slider
スライスした画像をパラパラめくってチェンジする効果、インパクトありますよね。

今回、リニューアル中のサイトに使わせて頂いただきました。

jQueryやWordPressのプラグインとして動作します。
Nivo Slider ダウンロード

HTML5 head内に以下を追加

(ソースや画像ファイルのパスは適宜変更してください。)
[html]
[/html]

JavaScriptの追加

(</body>の前に追加しました。)
[javascript]


[/javascript]

画像を読み込む

[html]



[/html]

$(‘#slider’).nivoSlider()のsliderと<div id=”slider”>のsliderを一緒にします。
テーマを変更したい時はtheme-defaulttheme-barなどとすれば変更できます。
(head内でcssファイルを読み込むのも忘れずに。)

オプションのデフォルト値(jquery.nivo.slider.js 637行目辺り)

[javascript]
effect: ‘random’,
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: ‘Prev’,
nextText: ‘Next’,
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
[/javascript]

アニメーションの種類(jquery.nivo.slider.js 350行目辺り)

  • sliceDownRight
  • sliceDownLeft
  • sliceUpRight
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

ライセンスはMIT licenseです。


出水市でWeb屋やってます。Webサイト作ったり、サーバ設定したりしている釣りの好きなMacユーザーです。 ドラクエ5のキラーパンサーにはゲレゲレと名付けました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください