Blog

エフェクトがかっこいい画像スライドショー – nivo slider –

2012.05.30Cat:jQuery デザイナー

メインビジュアルで使える、画像のスライドショーを紹介したいと思います。

Nivo Sliderというエフェクトがかっこよくて豊富なプラグインです。

 

ダウンロード先は以下から

Nivo Slider – The World’s Most Popular jQuery & WordPress Image Slider

 

このプラグインでできることを簡単に説明します。

・画像のスライドショー(エフェクトが16種類!)

・スライドのコントローラーをつける(例:1,2,3,4 クリックするとその画像に移動)

・前へ、次へのボタンを設置

・スライド画像のサムネイルを設置(サムネイル画像は自分で作成しないといけない)

・画像の説明文をつけることができる

こんな感じです。

 

細かい設定もできますが、それは後ほど。

 

デモを作りましたので、ご覧下さい。

 

DEMO

 

Nivo Sliderの使い方

 

まずは、上記サイトからダウンロードします。

ダウンロードしたファイルのjquery.nivo.slider.js,nivo-slider.cssをhead内に読み込みます。

nivo-slider.cssは自分で調節する必要があるかと思います。

そして、さらに、

 を記載します。

htmlは、

基本的にこれだけで大丈夫です。

 

画像をどこかへリンクさせたい場合は、

aタグで囲み、aタグのclassに、 nivo-imageLink をつけます。

 

また、キャプション(説明文)を付けたい場合は、imgのtitleタグに記載します。

 

 

デモのソースは以下になります。

デモはhtml5で書いています。

 

javascript

 

 

ちなみにエフェクトの種類は下記の設定があります。

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

 

HTML

 

 

css

 

 

 

nivo-slider.cssを一部書き換えています。

 

エフェクトは豊富ですが、ひとつで設定すると、

なんか短調な感じがしてしまいますので、

randomに設定するのが良いのかもしれません。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ