新しいトップページをつくってみた
④スライドショー
トップページ制作過程の第4回目は、
jQueryを使ってスライドショーを追加してみました。
備忘録として残しておきます。
1.スライドショー概要
追加したスライドショーは、5秒毎に自動で次の画像に切り替わります。また、左右のナビボタンを押しても切り替わります。
画像下部には、ページングボタン（スライド中の現在位置を示すボタン）を配置しました。
2.スライドショーベース作成
front-page.phpとstyle.cssにカルーセルのベースとなる要素を配置していきます。
具体的には、以下の様なコードをfront-page.php に記載します。
<!-- スライドショー -->
<div id="slideGalley">
<ul id="slide">
<li><a href="#"><img src="<?php echo get_template_directory_uri();?>/images/slideshow1.jpg" alt=""></a></li>
<li><a href="#"><img src="<?php echo get_template_directory_uri();?>/images/slideshow2.jpg" alt=""></a></li>
<li><a href="#"><img src="<?php echo get_template_directory_uri();?>/images/slideshow3.jpg" alt=""></a></li>
</ul>
<div id="nav">
<img src="<?php echo get_template_directory_uri();?>/images/nav_prev.png" class="prev">
<img src="<?php echo get_template_directory_uri();?>/images/nav_next.png" class="next">
</div>
<ul id="paging"></ul>
</div>
style.cssには以下のように実装します。
（注意：実際私のサイトに合わせて調整していますので、個別にレイアウト調整が必要です。）
/* スライドショー */
#slideGalley {
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
#slide {
width: 10000px;
list-style-type: none;
margin: 0;
padding: 0;
}
#slide li {
float: left;
}
#paging {
text-align: center;
position: absolute;
/* width: 100%; */
bottom: 10px;
list-style-type: none;
padding: 0;
margin: 0;
}
#paging li {
display: inline-block;
*display: inline;
*zoom:1;
width: 20px;
height: 20px;
background: url(./images/page.png);
}
#paging li.active {
background: url(./images/page_active.png);
}
#nav .prev {
position: absolute;
left: 10px;
top: 60%;
margin-top: -50px;
width: 25px;
height: 50px;
}
#nav .next {
position: absolute;
right: 10px;
top: 60%;
margin-top: -50px;
width: 25px;
height: 50px;
}
コード説明
スライドショーを表示する領域をdiv要素で囲み、idをslideGalleyとします。
slideGalleyのwidthは、親要素の幅に合わせて100%に設定し、overflow:hiddenを指定しています。
また、ナビボタンやページングをposition:absoluteで配置するため、slideGalleyのpositionはrelativeに設定します。
ul要素のslideは、画像をfloatで横並べにしていくので、画像数が増えても対応できるようにwidthを10000pxにしています。ページング用のli要素(paging)は、class属性のactiveが付いている場合は、灰色の画像を指定し、activeが付いていない場合は、白色の画像を表示するようにCSSで設定しています。
3.jQueryでスライドショーを実装
jQueryを使って以下のように実装します。
//ページングの設定
jQuery("#slide li").each(function(){
jQuery("#paging").append(jQuery("<li></li>").attr("data-img",
jQuery("img",this).attr("src")));
});
jQuery("#paging li:first-child").addClass("active");
//自動スライドの実行
var timerId = setInterval(function(){
jQuery("#nav .next").click();
},5000);
//自動スライドの制御
jQuery("#slideGalley").hover(function(){
jQuery("#nav").show();
clearInterval(timerId);
},function(){
jQuery("#nav").hide()
timerId = setInterval(function(){
jQuery("#nav .next").click();
},5000);
});
//右矢印ボタンが押された際の挙動
jQuery("#nav .next").click(function(){
jQuery("#slide:not(:animated)").animate({
"margin-left" : -1*jQuery("#slide li").width()
},function(){
jQuery("#slide").css("margin-left","0").append(jQuery("#slide li:first-child"));
jQuery("#paging li.active").removeClass("active");
jQuery("#paging li[data-img='"+jQuery("#slide li:first-child img").attr("src")+"']").addClass("active");
});
});
//左矢印ボタンが押された際の挙動
jQuery("#nav .prev").click(function(){
jQuery("#slide:not(:animated)")
.css("margin-left",-1*jQuery("#slide li").width())
.prepend(jQuery("#slide li:last-child"))
.animate({
"margin-left" : 0
},function(){
jQuery("#paging li.active").removeClass("active");
jQuery("#paging li[data-img='"+jQuery("#slide li:first-child img").attr("src")+"']").addClass("active")
});
});
コード説明
最初のページングの設定では、画像の下に配置するページング(li要素）を#paging内に挿入しています。
自動スライドの実行では、setIntervalを使って、5000ミリ秒ごとに右ナビボタンのクリックイベントを実行しています。
自動スライドの制御では、#slideGalleyにマウスが乗った時に、ナビボタンを非表示にして、タイマーを停止します。マウスが外れたときにナビボタンを再表示し、タイマーを起動して自動スライドを再開します。
次に右ナビキーが押された時の挙動を設定しています。スライド中にナビを連続クリックされないように、#slide:not(:animated)として、アニメーション中ではない場合のみを対象としています。
アニメーションは、1枚目のスライドの横幅をマイナスにした値を#slideのmargin-leftに設定することで、スライドを左に動かしています。
最後に左ナビキーが押された時の挙動を設定しています。CSSのmargin-leftにスライド横幅だけマイナス指定し、#slideの最後のli要素をprepend()で先頭に移動しています。
そして、animateを使ってmargin-leftを0にすることで、右から左にスライドする動きを付けています。
4.最後に
以上、jQueryを使ってスライドショーの制作をご紹介しました。
少しでも参考になれば幸いです。
