Webサイトを訪れるユーザーにとって、視覚的に魅力的なデザインは非常に重要です。その中でも、画像スライダーは多くのWebサイトで利用されている人気のある要素です。
この記事では、jQueryプラグインであるeasySlider1.7.jsを使って、簡単に画像スライドショーを作成する方法を紹介します。これにより、複数の画像を「Prev・Next」ボタンや数字リンクでスライドさせることができます。
easySlider1.7.jsとは
easySlider1.7.jsは、簡単に画像スライドショーを作成できる軽量なjQueryプラグインです。このプラグインを使えば、コーディングの知識がそれほどなくても、簡単に美しいスライダーを作成することができます。特徴としては、次のような点があります：
- シンプルな設定: 基本的な機能を簡単に設定できます。
- 多様なオプション: 自動再生、無限ループ、ナビゲーションボタンなど多彩なオプションがあります。
- 軽量: ファイルサイズが小さいため、ページの読み込みが速いです。
easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するJavaScriptの記述
まずは、jquery.min.js、easySlider1.7.jsファイルを読み込みます。
次に、JavaScriptを使ってスライダーを設定します。以下のスクリプトを準備します。
「Prev・Next」リンククリックでスライドするエリア（#slider）、「1・2・3…」リンククリックでスライドするエリア（#slider2）を用意しました。$(スライドするエリア).easySlider({オプション})で設定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev",
});
$("#slider2").easySlider({
numeric: true
});
});
</script>
複数画像のスライド表示を導入するCSSの記述
次に、スライダーのデザインをCSSで設定します。以下のスタイルシートをHTMLに追加してください。
「Prev・Next」リンククリックでスライドするエリア（#slider）、「1・2・3…」リンククリックでスライドするエリア（#slider2）のCSS記述です。必要に応じて変更して下さい。
<style type="text/css">
<!--
body {
margin: 0px;
font-size:14px;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.4em;
text-align:center;
padding:15px 0 10px 0;
}
#idWrap{
width:700px;
margin:0 auto;
}
/* slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
text-align:left;
color:#333333;
text-decoration:none;
padding:5px 0 5px 0;
}
#prevBtn a:hover, #nextBtn a:hover,
#slider1next a:hover, #slider1prev a:hover{
text-decoration:underline;
}
#nextBtn a, #slider1next a{
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#999999;
color:#ffffff;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#ffffff;
color:#000000;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
-->
</style>
CSSはスライダーの外観をカスタマイズするために非常に重要です。上記のコードを参考にして、色やフォントサイズ、レイアウトを調整することができます。
easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するHTMLの記述
次に、HTMLでスライダーを配置します。以下のHTMLコードをコピーして、あなたのページに貼り付けてください。
このコードは、2つの異なるスライダーを作成するためのものです。一つは「Prev・Next」ボタンで画像を切り替えるもので、もう一つは「1・2・3…」の数字リンクをクリックして切り替えるものです。あなたのプロジェクトに合わせて画像パスや要素IDを調整してください。
<div id="idWrap">
<h1>3つの画像を「Prev・Next」「1・2・3…」の2パターンでスライド表示させます。</h1>
<div align="center">
<div id="slider">
<ul>
<li><img src="i01.jpg" alt="" /></li>
<li><img src="i02.jpg" alt="" /></li>
<li><img src="i03.jpg" alt="" /></li>
</ul>
</div>
<br>
<br>
<div id="slider2">
<ul>
<li><img src="i01.jpg" alt="" /></li>
<li><img src="i02.jpg" alt="" /></li>
<li><img src="i03.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
easySlider：複数画像のスライド表示のデモページ
実際の動作を確認したい場合は、以下のリンクをクリックしてデモページをご覧ください。
このデモを参考にしながら、あなたのサイトに応じたカスタマイズを行うと良いでしょう。
ソース元：Easy Slider 17 Numeric Navigation jQuery Slider
詳しい情報やさらに高度なカスタマイズについては、元のソースページをご覧ください。
Easy Slider 17 Numeric Navigation jQuery Slider
このリンクから、easySlider1.7.jsの全ての機能や追加のオプションについて詳しく学ぶことができます。
まとめ
easySlider1.7.jsを使用すると、非常に簡単にプロフェッショナルな画像スライダーをWebサイトに追加することができます。コードの調整も容易で、初心者でもすぐに実装可能です。これを機に、あなたのWebプロジェクトに視覚的な魅力を加えてみてはいかがでしょうか。
この記事を通じて、easySlider1.7.jsを活用したスライダーの基本的な導入手順とカスタマイズの方法を学んでいただければ幸いです。スライダーを使って、訪問者にとってより魅力的なサイトを作成しましょう。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
