本記事は、Nivo Slider の紹介です。
作業手順
効果の種類は、提供元サンプルにあります。
作業手順
- スクリプトのダウンロード
Nivo Sliderからダウンロードするには、登録を求められ面倒ですので、以下からDownloadして下さい。
nivoslider.js
nivo-slider-defalt.css
arrows.png
bullets.png
loading.gif - 画像の準備
本ブログの横幅に合わせ、画像widthを決めて下さい。 本ページでは、960 x 238pxとしています。
(使用しているレイアウトの横幅に収まるように画像width="100%"とします。 - スクリプトと画像をアップロード
画像ファイル名は任意ですが、手順5のファイル名と相応させて下さい。 - 以下のHTMLを記述します。挿入位置はテンプレートにより異なります。本サイトの場合、
<div id="banner">~</div>
ここに挿入
<div id="navigation>~ - <div class="theme-default">
<div id="slider" class="nivoSlider"> <img src="/files/theme/slide1.png" width="100%" /> - ヘッダーコードにcssを記述
<link rel="stylesheet" href="/files/theme/nivo-slider-default.css" media="screen" /> - ヘッダーコードに以下を記述
<script src="files/theme/nivoslider.js" ></script>
<script >
jQuery(window).load(function() { jQuery('#slider').nivoSlider({ effect:'fold,sliceUp,sliceDown', // 効果
animSpeed: 500, // 効果速度
pauseTime: 10000 // 静止時間 10秒
});
});
</script>
<img src="/files/theme/slide2.png" width="100%" />
<img src="/files/theme/slide3.png" width="100%" />
<img src="/files/theme/slide4.png" width="100%" />
<img src="/files/theme/slide5.png" width="100%" />
</div>
</div>
効果の種類は、提供元サンプルにあります。