jQueryスライドショー「Nivo Slider」

【サンプルデモンストレーション】

レシポンシブWebデザインに対応しているスライドショーjQueryプラグイン体験第三弾です。
スライドショー、満喫したので、これでひとまず終わりにします。

「Nivo Slider」からでDownloadさせてもらいました。

サンプルを作ってみることに！

DownloadしたcssとjScriptファイルをアップ。

imagesフォルダ内に、

yoko11.png
yoko12.png
yoko13.png
yoko14.png
yoko15.png

の5画像を入れてアップ。

demoフォルダの中にsample_nivo.htmlファイルを作成。

＜/head＞の直前に、

<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="../scripts/jquery.nivo.slider.js"></script> 
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

で、
body内に、

<div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
　　　<img src="images/yoko11.jpg" data-thumb="images/yoko11.jpg" alt="" title="ヨコハマ君がいるよ" />
　　　<img src="images/yoko12.jpg" data-thumb="images/yoko12.jpg" alt="" />
　　　<img src="images/yoko13.jpg" data-thumb="images/yoko13.jpg" alt="" />
　　　<img src="images/yoko14.jpg" data-thumb="images/yoko14.jpg" alt="" />
　　　<img src="images/yoko15.jpg" data-thumb="images/yoko15.jpg" alt="" />
        </div>
</div>

そして、
出来たのがこちら。

【サンプルデモンストレーション】

(^-^)！！

今回は、オプションは設定しませんですが、以下のようにいろいろ設定できるようです。

$('#slider').nivoSlider({
    effect: 'random',               // Specify sets like: 'fold,fade,sliceDown'
    slices: 15,                     // For slice animations
    boxCols: 8,                     // For box animations
    boxRows: 4,                     // For box animations
    animSpeed: 500,                 // Slide transition speed
    pauseTime: 3000,                // How long each slide will show
    startSlide: 0,                  // Set starting Slide (0 index)
    directionNav: true,             // Next & Prev navigation
    controlNav: true,               // 1,2,3... navigation
    controlNavThumbs: false,        // Use thumbnails for Control Nav
    pauseOnHover: true,             // Stop animation while hovering
    manualAdvance: false,           // Force manual transitions
    prevText: 'Prev',               // Prev directionNav text
    nextText: 'Next',               // Next directionNav text
    randomStart: false,             // Start on a random slide
    beforeChange: function(){},     // Triggers before a slide transition
    afterChange: function(){},      // Triggers after a slide transition
    slideshowEnd: function(){},     // Triggers after all slides have been shown
    lastSlide: function(){},        // Triggers when last slide is shown
    afterLoad: function(){}         // Triggers when slider has loaded
});

エフェクトは以下のモノから指定できるようです。

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

三つのjQueryスライドショープラグインを体験しましたが、
やっぱ、「jQuery」そのものをもっと勉強せなあかんわ、
と痛感しました・・・。

【引用サイト】
http://docs.dev7studios.com/jquery-plugins/nivo-slider

Yokohamaya Blog