デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

新しいトップページをつくってみた
④スライドショー

トップページ制作過程の第4回目は、
jQueryを使ってスライドショーを追加してみました。
備忘録として残しておきます。

スポンサーリンク

1.スライドショー概要

追加したスライドショーは、5秒毎に自動で次の画像に切り替わります。また、左右のナビボタンを押しても切り替わります。
画像下部には、ページングボタン(スライド中の現在位置を示すボタン)を配置しました。
slideshow1

2.スライドショーベース作成

front-page.phpとstyle.cssにカルーセルのベースとなる要素を配置していきます。
具体的には、以下の様なコードをfront-page.php に記載します。

style.cssには以下のように実装します。
(注意:実際私のサイトに合わせて調整していますので、個別にレイアウト調整が必要です。)

コード説明
スライドショーを表示する領域を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を使って以下のように実装します。

コード説明
最初のページングの設定では、画像の下に配置するページング(li要素)を#paging内に挿入しています。

自動スライドの実行では、setIntervalを使って、5000ミリ秒ごとに右ナビボタンのクリックイベントを実行しています。
自動スライドの制御では、#slideGalleyにマウスが乗った時に、ナビボタンを非表示にして、タイマーを停止します。マウスが外れたときにナビボタンを再表示し、タイマーを起動して自動スライドを再開します。

次に右ナビキーが押された時の挙動を設定しています。スライド中にナビを連続クリックされないように、#slide:not(:animated)として、アニメーション中ではない場合のみを対象としています。
アニメーションは、1枚目のスライドの横幅をマイナスにした値を#slideのmargin-leftに設定することで、スライドを左に動かしています。

最後に左ナビキーが押された時の挙動を設定しています。CSSのmargin-leftにスライド横幅だけマイナス指定し、#slideの最後のli要素をprepend()で先頭に移動しています。
そして、animateを使ってmargin-leftを0にすることで、右から左にスライドする動きを付けています。

4.最後に

以上、jQueryを使ってスライドショーの制作をご紹介しました。
少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン