簡単にクールなスライダーが実装できるjQueryプラグイン Nivo slider

みなさん、こんばんは。

うだつのあがらないWebデザイナー
はりるんです。

今日は、このサイトのトップページに実装されている
jQUeryのプラグイン「Nivo slider」を紹介します。
javascriptの知識がなくても
割と簡単に実装できます。
私にもできましたから…。

Nivo Slider

まずはjQUeryとNivo sliderプラグインをダウンロード

はじめにコアになるjQUery本体と
Nivo sliderプラグインをダウンロードしてきます。

jOueryを動作させるためにはjQUery本体が必要です。
詳しくは以下をご参照ください。

jQuery日本語リファレンス

次にNivo sliderプラグインをダウンロードします。
サイトの青い「Download」ボタンでダウンロードできます。

Nivo Sliderダウンロード

プラグイン実装

ダウンロードしたNivo sliderにはサンプルファイルが入っています。
スタイルシートとナビゲーションの画像ファイルも入っているので
それをはめこんでもよし、オリジナルで組んでもよしです。

いちおう、私のコーディング例を以下に記します。

HTML(header内)

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<link rel="stylesheet" type="text/css" href="js/nivo-slider.css"/>
<link rel="stylesheet" type="text/css" href="js/themes/default/default.css"/>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

nivo-sliderの基本CSSと付属のテンプレートCSSと画像を流用しています。

設定のJS(header内)

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
        effect:'fade',
	animSpeed:500,
        pauseTime:6000,
});
});
</script>

細かい説明は省きます。
こう書けばnivo sliderが動きます。

スライダー部分のHTML

1
2
3
4
5
6
7
8
9
<div class="slider-wrapper theme-default">    
<div id="slider" class="nivoSlider">
<img src="images/top_img_f01.jpg" width="725" height="223">
<img src="images/top_img_f02.jpg" width="725" height="223">
<img src="images/top_img_f03.jpg" width="725" height="223">
<img src="images/top_img_f04.jpg" width="725" height="223">
<img src="images/top_img_f05.jpg" width="725" height="223">
</div>
</div>

画像ファイルのサイズは必ず同じサイズにしましょう。

オプション設定

動きのスピードやエフェクトは以下のように設定できます。

オプションの例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
    $('#slider').nivoSlider({
        effect:'random', // スライド時のアニメーション
        slices:6, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // アニメーションの速度(ms)
        pauseTime:3000, // 画像の停止時間(ms)
        startSlide:0, // 初めに表示する画像位置(0から)
        directionNav:true, // 前・次ボタンを表示
        directionNavHide:true, // マウスホバー時のみナビゲーションを表示
        pauseOnHover:true, // マウスホバー時に切り替えを一時停止
        controlNav:true, // コントロールナビの表示
        controlNavThumbs:false, // コントロールナビに画像サムネイルを使用
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // スライドをキーボードで操作
        manualAdvance:false, // 自動スライドしない
        captionOpacity:0.8, // キャプションの透過度
        prevText: 'Prev', // 前ボタンの名前
        nextText: 'Next', // 次ボタンの名前
  });
});

使用できるエフェクト

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft

jQueryはわからないなあ~というひとは
とっておきの入門書がございます。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

新品価格
¥3,129から
(2013/4/6 22:07時点)

jQuery面白いですよ~