ウェブサイトで画像をスライドショーとして表示したいと思ったことはありませんか？特に、エフェクト付きで複数の画像を切り替えながら表示できると、見た目が格段に華やかになります。そこで今回は、「jquery.nivo.slider.js」というプラグインを使って、簡単に複数の画像をさまざまなエフェクトで切り替える方法を詳しく解説します。エンジニア初心者の方でも分かりやすいように、ステップごとに丁寧に説明していきます。
「jquery.nivo.slider.js」は、jQueryを使って作られたスライドショープラグインの一つで、簡単に美しいエフェクトを付けることができます。HTMLやCSSの知識が少しあれば、すぐに自分のウェブページに取り入れられるので、ぜひ参考にしてください。
jquery.nivo.slider.jsとは
「jquery.nivo.slider.js」は、数あるjQueryスライダープラグインの中でも特に人気のあるものです。画像をさまざまなエフェクトで切り替えることができ、デザイン性の高いウェブページを簡単に作成できます。このプラグインの特徴は、シンプルなコードで実装できる点と、多様なエフェクトがあらかじめ用意されている点です。さらに、プラグイン自体が軽量で、ウェブページの読み込み速度に大きな影響を与えないのも魅力です。
このプラグインを使用することで、画像のフェードイン・フェードアウトやスライド、ワイプなど、さまざまなエフェクトを組み合わせたスライドショーを簡単に作成できます。また、レスポンシブ対応しているため、スマートフォンやタブレットでも問題なく動作します。ウェブページのアクセントとしてスライドショーを取り入れたい場合には、この「jquery.nivo.slider.js」が最適です。
次に、このプラグインを使って画像を切り替える方法を、実際のコードを使って説明します。まずは、スライドショーに必要なCSSの設定から見ていきましょう。
複数画像をさまざまなエフェクトで切り替えるためのCSSの記述
まず、「jquery.nivo.slider.js」を使ってスライドショーを作成する際には、デフォルトのスタイルシート（CSS）を適用する必要があります。これらのスタイルシートは、スライドエリアの見た目やエフェクトの動作に関係しているため、プロジェクトに取り込むことが必要です。具体的には、「default.css」と「nivo-slider.css」の2つのファイルを読み込みます。
次に、スライドエリアを作成するためのCSSを定義します。今回は、スライドエリアを「.slider-wrapper」というクラスで指定していますが、この部分は自由にカスタマイズできます。コードを見ていきましょう。
<link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.4em;
text-align:center;
padding:15px 0 5px 0;
}
p{
font-size:14px;
text-align:center;
}
#idWrap{
width:650px;
margin:0 auto;
}
.slider-wrapper {
width: 200px;
margin:0 auto;
}
-->
</style>
このスタイルシートでは、スライドエリアのサイズや中央配置、フォントの設定などを行っています。.slider-wrapperクラスに設定されている width: 200px; の部分は、スライドショーの幅を指定しています。ご自身のウェブページのデザインに合わせて、必要に応じてこの値を変更してください。
また、#idWrapはスライドショー全体を囲む要素です。margin: 0 auto;を使って中央に配置しているので、スライドショーをページ中央に表示したい場合に便利です。
複数画像をさまざまなエフェクトで切り替えるためのHTMLの記述
次に、スライドショーの構造をHTMLで記述します。今回の例では、スライドエリアのクラスを「slider-wrapper」とし、idを「slider」としています。また、5枚の画像を用意して、それぞれの画像にサムネイル用の画像を設定しています。
<div id="idWrap">
<h1>複数画像をスライドしながら色々なエフェクトで切替表示します。</h1>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="i01.jpg" data-thumb="i01.jpg" alt="1枚目の画像" title="1枚目の画像" />
<img src="i02.jpg" data-thumb="i02.jpg" alt="2枚目の画像" />
<img src="i03.jpg" data-thumb="i03.jpg" alt="3枚目の画像" title="3枚目の画像" />
<img src="i04.jpg" data-thumb="i04.jpg" alt="4枚目の画像" />
<img src="i05.jpg" data-thumb="i05.jpg" alt="5枚目の画像" title="5枚目の画像" />
</div>
</div>
</div>
＜div id=”slider” class=”nivoSlider”＞内にあるimgタグが、スライドショーで切り替える画像です。src属性で画像のパスを指定し、data-thumb属性でサムネイル用の画像を指定しています。alt属性には画像の代替テキストを設定し、title属性には画像のタイトルを記述します。これにより、ユーザーが画像にマウスオーバーした際にタイトルが表示され、視覚的に分かりやすくなります。
この部分も、ご自身のウェブページの仕様に合わせて画像のパスやタイトルなどを変更してください。
jquery.nivo.slider.jsを使って画像をスライドショーで切り替えるJavaScriptの記述
最後に、jquery.nivo.slider.jsを使用して画像をスライドショーとして表示するためのJavaScriptを記述します。まず、jQueryと「jquery.nivo.slider.js」ファイルを読み込む必要があります。
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
このコードでは、$(window).load(function() { … });を使って、ページが読み込まれた際にスライドショーを開始する処理を記述しています。$(‘#slider’).nivoSlider();の部分で、先ほどHTMLで作成した＜div id=”slider”＞の中の画像が順番に切り替わるようになっています。
エフェクトの種類や動作速度など、nivoSlider()にはさまざまなオプションを設定できます。例えば、$(‘#slider’).nivoSlider({ effect: ‘fade’, animSpeed: 500, pauseTime: 3000 });のように書くことで、フェードエフェクトで画像を切り替えたり、アニメーション速度や表示時間を調整したりできます。興味がある方は公式ドキュメントを参考に、さまざまなカスタマイズに挑戦してみてください。
jquery.nivo.slider.jsでスライドショーのデモページを作成
以上で、jquery.nivo.slider.jsを使ったスライドショーの実装方法について説明しました。実際に動作するデモページを作成したので、ぜひ確認してみてください。
jquery.nivo.slider.jsで複数画像をスライド切替表示デモ
まとめ
「jquery.nivo.slider.js」は、初心者でも簡単に実装できるスライドショープラグインです。複数の画像をスムーズに切り替えたり、さまざまなエフェクトを適用できるため、ウェブページのデザインに華やかさを加えることができます。今回の解説を参考に、ぜひ自分のサイトでもスライドショーを実装してみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
