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

新しいトップページをつくってみた
③カルーセルパネル

トップページ制作過程の第3回目は、
投稿のアイキャッチ画像をjQueryを使ってカルーセルパネルにしてみましたので
備忘録として残しておきます。

スポンサーリンク

1.カルーセルパネルとは

「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。
カルーセル(Carousel:回転木馬)とは、遊園地にあるメリーゴーランドのことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。

carousel-1

2.カルーセルのベース作成

front-page.phpとstyle.cssにカルーセルのベースとなる要素を配置していきます。

2.1 front-page.php

具体的には、以下の様なコードをfront-page.php に記載します。

コード説明
カルーセル全体を囲むdiv要素を配置し、id属性をcarouselWrapとします。(2行目)
左右にスライドさせるためのボタンを配置し、id属性をcarouselPrev,carouselNextとします。(3,4行目)
パネルを実際に表示するdiv要素を配置し、id属性をcarouselとします(5行目)
非表示の領域を含むパネル全体を格納するdiv要素を配置し、id属性をcarouselInnerとします。(6行目)

WP_Queryを使ってカテゴリーWordPressのアイキャッチを読み込みli要素で囲みます。(8行目,14〜16行目)

※WP_Queryの詳細は、前回の記事を参照ください。
固定ページに投稿を読み込む

読み込んだ画像は、3件ずつ繰り返し表示させたいので、carousel_cntという変数を追加し、3件ずつul要素で囲み、class名をcolumnにします。(10〜12行目、18〜20行目、22〜24行目)

2.2 style.css

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

コード説明
パネルの表示領域(#carousel)は、#carouselWrapで設定した領域と同じになるようにwidth:100%,height:100%とし、領域からはみ出す部分は、overflow:hiddenで非表示にします。(27〜31行目)
パネル(ul.column)は、float:leftを設定し横並びにしています。(39行目)

3.jQueryでパネルのスライドを実装

パネルをスライドさせるには、jQueryを使います。
具体的には、以下のように実装します。

コード説明

初期設定
まずはじめに、ページが読み込まれた時の初期設定を行います。
パネル全体を格納する#carouselInnerの横幅を680✕ul.column数分設定します。(4行目)
※680pxは、サイトに応じて調整が必要です。
また、prependTo()を使い、最後のパネル(ul.column)を#carouselInnerの先頭に移動します。(5行目)
css()でmargin-leftに-680pxを設定し、#carouselInnerを左にずらします。(6行目)

Prev押下時処理
次は、Prev(戻る)ボタンが押された処理です。
clickイベントが発生した時、Prev(戻る)、Next(進む)ボタンを非表示にしています。(10,23行目)
これは、スライド中にボタンが押されてしまうと、表示位置の計算が狂うためです。
次に、animate()を使ってスライドさせます。Prev(戻る)ボタンでは、左から右方向にスライドさせたいので、margin-leftに680px加算します。(11〜13行目)
スライド処理が終わったら、コールバック関数で、初期設定と同じ処理を行います。(15〜16行目)
最後に、非表示にしていたボタンを再表示させます。(17行目)

Next押下処理
Next(進む)ボタンは、右から左にスライドさせたいので、margin-leftに680pxを減算した値を設定します。(25行目)
あとは、Prev押下処理と同様の処理となります。

これで、カルーセルパネルが完成です。

4.最後に

以上、jQueryを使ってカルーセルパネルの制作をご紹介しました。
少しでも参考になれば幸いです。

スポンサーリンク

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

Twitter で

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

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

ブログ用無料WordPressテーマ

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

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

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン