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

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

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

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

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

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

2.1 front-page.php

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

    <!-- カルーセルパネル -->
    <div id="carouselWrap">
      <p id="carouselPrev"><img src="<?php echo get_template_directory_uri();?>/images/btn_prev.gif" alt="前へ"></p>
      <p id="carouselNext"><img src="<?php echo get_template_directory_uri();?>/images/btn_next.gif" alt="次へ"></p>
      <div id="carousel">
        <div id="carouselInner">
        <?php $carousel_cnt=1; ?>
        <?php $the_query = new WP_Query(array('category_name' => 'wordpress', 'posts_per_page' => -1)); ?>
        <?php if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post(); ?>
          <?php if( $carousel_cnt == 1): ?>
            <ul class = "column">
          <?php endif; ?>

          <?php if( has_post_thumbnail() ): ?>
            <li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array( 211, 140 ) ); ?></a></li>
          <?php endif; ?>

          <?php if( $carousel_cnt == 3): ?>
            </ul>
          <?php endif; ?>

          <?php $carousel_cnt++; ?>
          <?php if($carousel_cnt == 4): $carousel_cnt=1; ?>
          <?php endif; ?>

        <?php endwhile; endif; ?>
        <?php wp_reset_postdata(); ?>
        </div> <!-- carouselInner -->
      </div> <!-- carousel -->
    </div>  <!-- carouselWarp -->

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

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

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

2.2 style.css

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

/* カルーセルパネル */
#carouselWrap {
  margin: 0;
  width: 650px;
  height: 180px;
  padding: 0;
  position: relative;
  float: left;
}

#carouselPrev {
  position: absolute;
  top: 60px;
  left: -23px;
  cursor: pointer;
  z-index: 1;
}

#carouselNext {
  position: absolute;
  top: 60px;
  right: -12px;
  cursor: pointer;
  z-index: 1;
}

#carousel {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#carouselInner ul.column {
  width: 650px;
  height: 140px;
  margin: 0;
  padding: 15px 0 15px 15px;
  list-style-type: none;
  float: left;
}

#carouselInner ul.column li {
  float: left;
  margin-right: 3px;
  display: inline;
}

#carouselInner ul.column li img {
  border:none;
  width: 211px;
  height: 140px;
}

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

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

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

jQuery(function(){

  /* カルーセル制御(初回表示) */
  jQuery("#carouselInner").css("width",680*jQuery("#carouselInner ul.column").length+"px");
  jQuery("#carouselInner ul.column:last").prependTo("#carouselInner");
  jQuery("#carouselInner").css("margin-left","-680px");

  /* カルーセル制御(Prev押下時) */
  jQuery("#carouselPrev").click(function(){
    jQuery("#carouselNext,#carouselPrev").hide();
    jQuery("#carouselInner").animate({
      "margin-left" : parseInt(jQuery("#carouselInner").css("margin-left"))+680+"px"
    },"slow","swing" ,
    function(){
      jQuery("#carouselInner").css("margin-left","-680px")
      jQuery("#carouselInner ul.column:last").prependTo("#carouselInner");
      jQuery("#carouselNext,#carouselPrev").show();
    });
  });

  /* カルーセル制御(Next押下時) */
  jQuery("#carouselNext").click(function(){
    jQuery("#carouselNext,#carouselPrev").hide();
    jQuery("#carouselInner").animate({
      "margin-left" : parseInt(jQuery("#carouselInner").css("margin-left"))-680+"px"
    },"slow","swing" ,
    function(){
      jQuery("#carouselInner").css("margin-left","-680px");
      jQuery("#carouselInner ul.column:first").appendTo("#carouselInner");
      jQuery("#carouselNext,#carouselPrev").show();
    });
  });
});

コード説明

初期設定
まずはじめに、ページが読み込まれた時の初期設定を行います。
パネル全体を格納する#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を使ってカルーセルパネルの制作をご紹介しました。
少しでも参考になれば幸いです。