レシポンシブ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