□ Nivo Slider
Nivo Sliderは16種類のアニメーションを使ったスライドショーを実現するjQueryプラグインです。
横にスライドすると言うよりは、エフェクトで画像を入れ替えるというイメージに近いです。エフェクト数が豊富なので、見てて飽きません。
| + サンプル | |||||||||||
| + | デフォルトの設定 スライド下部に移動用ボタンがあるタイプ |
 |
+ | カスタム設定-A スライド下部の移動用ボタンがを削除。 |
|
||||||
| + | カスタム設定-B スライド部分の影を削除。シンプル・スマートなサイト用 |
|
|||||||||
| + 解説・カスタマイズ | |||||||||||
| ダウンロードしたファイルをそのまま利用できる場所に移動・保存してください。 フォルダ・ファイル位置は変更しないでください。 index.htmlを開き、ご自身の環境で、間違えなく動作する事を確認してください。 その後、ご自身のホームページに合わせてデータの追加を行ってください。 データの追加時、以下の部分は修正しないでください。 ・title下のscript文 ・<div class="slider-wrapper theme-default">〜</div>の部分 この部分が実行部分になります。表示場所を移動させる時はこの部分を丸々移動してください。 スライドさせたい画像の保管場所は\images\slideの中です。(サンプルで"img_bahamas.jpg"等が保存されている場所) スライドする画像サイズを元に、以下の部分を修正してください。 \images\slide\nivo-slider.css 「.nivoSlider」のwidthとheight (サンプルで「width:1000px;」「height:563px;」の部分) 「.nivo-main-image」のwidth (サンプルで「width:1000px;」の部分) スライドする画像の枚数等に合わせて、以下の部分を修正してください。 index.html 「div id="slider"」の<a〜>の部分を必要な枚数分変更してください。 リンクが不要な場合、Aタグは削除してください。 「src」と「data-thumb」2か所を変更してください。 各画像を表示させる時間を変更したい場合、以下の部分を修正してください。 index.html 「pauseTime:6000」の数値を変更。 数値を大きくすると、各画像を表示する時間が長くなります。 |
|||||||||||
| + ダウンロード | |||||||||||
|
|||||||||||
| + リンク | |||||||||||
| 配布元 : dev7studios.com | |||||||||||
