Nivo Sliderの使い方
- 下記ページの 「Download ZIP」 よりファイル1式をダウンロード。
- ダウンロードしたファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にcssファイルを読み込ませるためのコードを記述。<head> <!--ダウンロードしたファイル--> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/nivo-slider.css" /> </head>
サンプルのdefault.cssコード(サンプルのdefault.cssは改変しています)
/* Skin Name: Nivo Slider Default Theme Skin URI: http://nivo.dev7studios.com Skin Type: flexible Description: The default skin for the Nivo Slider. Version: 1.2 Author: Gilbert Pellegrom Author URI: http://dev7studios.com */ .theme-default .nivoSlider { position: relative; background: #fff url(../images/loading.gif) no-repeat 50% 50%; margin-bottom: 0px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; } .theme-default .nivoSlider img { position: absolute; top: 0px; left: 0px; display: none; } .theme-default .nivoSlider a { border: 0; display: block; } .theme-default .nivo-controlNav { text-align: center; padding: 20px 0; } .theme-default .nivo-controlNav a { display: inline-block; width: 22px; height: 22px; background: url(../images/bullets.png) no-repeat; text-indent: -9999px; border: 0; margin: 0 2px; } .theme-default .nivo-controlNav a.active { background-position: 0 -22px; } .theme-default .nivo-directionNav a { display: block; width: 30px; height: 30px; background: url(../images/arrows.png) no-repeat; text-indent: -9999px; border: 0; } .theme-default a.nivo-nextNav { background-position: -30px 0; right: 15px; } .theme-default a.nivo-prevNav { left: 15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color: #fff; border-bottom: 1px dotted #fff; } .theme-default .nivo-caption a:hover { color: #fff; } .theme-default .nivo-controlNav.nivo-thumbs-enabled { width: 100%; } .theme-default .nivo-controlNav.nivo-thumbs-enabled a { width: auto; height: auto; background: none; margin-bottom: 5px; } .theme-default .nivo-controlNav.nivo-thumbs-enabled img { display: block; width: 120px; height: auto; }
サンプルのnivo-slider.cssコード(サンプルのnivo-slider.cssは改変しています)
/*ページ設定部分(style.cssなどで設定していれば削除する)*/ * { margin: 0; padding: 0; } body { background: #fff; font-family: Arial; } #container { width: 700px; margin: 20px auto; } a { color: #333; text-decoration: none; } a:hover { color: #ff0000; text-decoration: underline; } /*ここまでページ設定部分*/ /*ここからNivo Sliderの設定*/ /* * jQuery Nivo Slider v3.0.1 * http://nivo.dev7studios.com * * Copyright 2012, Dev7studios * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* The Nivo Slider styles */ .nivoSlider { position: relative; width: 700px; height: auto; overflow: hidden; } .nivoSlider img { position: absolute; top: 0px; left: 0px; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; z-index: 6; display: none; } /* The slices and boxes in the Slider */ .nivo-slice { display: block; position: absolute; z-index: 5; height: 100%; top: 0; } .nivo-box { display: block; position: absolute; z-index: 5; overflow: hidden; } .nivo-box img { display: block; } /* Caption styles */ .nivo-caption { position: absolute; left: 0px; bottom: 0px; background: #000; color: #fff; width: 100%; z-index: 8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter: alpha(opacity=8); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding: 5px; margin: 0; } .nivo-caption a { display: inline !important; } .nivo-html-caption { display: none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position: absolute; top: 45%; z-index: 9; cursor: pointer; } .nivo-prevNav { left: 0px; } .nivo-nextNav { right: 0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align: center; padding: 15px 0; } .nivo-controlNav a { cursor: pointer; } .nivo-controlNav a.active { font-weight: bold; }
・</body>の直前にjsファイルを読み込ませるためのコードを記述。
<!--ダウンロードしたファイル--> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <!--javascript追記--> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body>
・<body></body>内にコードを記述。<div class="theme-default"> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div>
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Nivo Slider</title> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/nivo-slider.css" /> </head> <body> <div id="container"> <div class="theme-default"> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。