Pocket

これが決定版!? スライダー をjQueryでお手軽実装

carouFredSel サンプル
今日はComtopiaのトップページにもある 上図のような スライダー を作ってみたいと思います。一般的にはこのようなスライダーのことを『カルーセル』と呼ぶようです。 カルーセルとはメリーゴーランド(回転木馬)の事を意味します。メリーゴーランドのようにクルクルとバナーが回転する様からこの名前が付けられたんですね。納得。では実装について簡単に解説していきたいと思います。

carouFredSelというjQueryプラグインを使います。

ComtopiaのホームページはWordpressで作られているので、Wordpressプラグインを使っても良かったのですが、今回は汎用的に使えるjQueryで作ってみました。今回は『carouFredSel』というプラグインを使います。JETRO(日本貿易振興機構)のホームページで使われているのが前から気になっていていたのです笑

この『carouFredSel』は動作に関する色々な設定オプションがあり、多様な使い方が出来る素晴らしいプラグインです。今日は基本的な設定方法として上図のスライダーにフォーカスして解説していきたいと思います。本当にさわりだけの説明ですので、ここから色々改造してあなたのホームページに最適なデザインに変更してください。では早速見ていきましょう。

carouFredSelのjQueryファイルをダウンロード

まずはjQueryのjavascriptファイルをダウンロードします。下記リンクよりcarouFredSelのページにアクセスしてください。Wordpress用の有料プラグインも存在するようですが、今回は無料のjQuery版を使用します。

carouFredSel ダウンロードページ
carouFredSel ホームページ

ページ中ほど『Free to use & Abuse』の中にある 『carouFredSel jQuery plugin』のリンクをクリックしてください。
jQueryのプラグインをダウンロード

GitHubにジャンプしますので、右下の『Download ZIP』をクリックし、ファイルを保存します。
GitHubからcarouFredSelをダウンロード

ダウンロード完了後、zipファイルを解凍します。『jquery.carouFredSel-6.2.1-packed.js』というファイルがあると思います。 これがcarouFredSelのjQueryファイルです。
carouFredSelのjavascript

carouFredSelをサーバーにアップロード、使う準備をする。

先程確認した『jquery.carouFredSel-6.2.1-packed.js』をFTP等を使用して、ホームページのあるサーバーにアップします。次に スライダー を使用するページの<head></head>内にこのファイルを読み込む設定を記述します。
一般的なhtmlでは、以下のようにタグを記載してください。
<script type='text/javascript' src='http://xxx.com/xxx/jquery.carouFredSel-6.2.1-packed.js'></script>

wordpressでは『header.php』というファイルがテンプレートの中にあると思いますので、同じく<head></head>内に以下タグを記載してください。
<?php wp_enqueue_script('carouFredSel', 'http://xxx.com/xxx/jquery.carouFredSel-6.2.1-packed.js', array('jquery'));?>

『http://xxx.com/xxx/』は『jquery.carouFredSel-6.2.1-packed.js』をアップしたパスに変更してくださいね。

htmlにスライダーのコンテンツを記述する。

スライダー の元になるhtmlファイルを編集します。とりあえず以下のように記載します。5行目の『prev.png』は左向きの戻る矢印、19行目の『next.png』は右向きの進む矢印の画像です。10~14行目の『jc01~jc05.png』は スライダー で使用するバナー画像です。tableタグで3つの領域に分け、戻る矢印、バナー、進む矢印という配置にしています。
<div class="list_carousel">
<table>
  <tr>
    <td>
      <a id="prev" href="#"><img src="http://xxx.com/yyy/prev.png"></a>
    </td>
    <td>
      <div class="caroufredsel_wrapper">
        <ul id="carousel">
          <li><img src="http://xxx.com/yyy/jc01.png"></li>
          <li><img src="http://xxx.com/yyy/jc02.png"></li>
          <li><img src="http://xxx.com/yyy/jc03.png"></li>
          <li><img src="http://xxx.com/yyy/jc04.png"></li>
          <li><img src="http://xxx.com/yyy/jc05.png"></li>
        </ul>
      </div>
    </td>
    <td>
      <a id="next" href="#"><img src="http://xxx.com/yyy/next.png"></a>
    </td>
  </tr>
</table>
</div>

jQueyでcarouFredSelを動かす。

次にcarouFredSelを作動させるためのjQueryファイルを作成します。メモ帳等のテキストエディタに以下のように記載してください。保存する名前は『slider.js』とでもしておきましょうか。これも同じくサーバーにアップして、carouFredSelを読み込んだ時と同様、headタグ内にタグを記載します。
jQuery(function($) {
  $("#carousel").carouFredSel({
    auto: 3000,
    prev: '#prev',
    next: '#next',
    scroll : {
      items           : 1,
      easing          : "swing",
      pauseOnHover    : true,
      duration        : 500
    }
  });
});

各オプションの説明は以下です。
『auto:3000』=3000ミリ秒(=3秒)で次のバナーに切り替え。
『prev: ‘#prev’』=idがprevのaタグをクリックされるとバナーが戻る。
『next: ‘#next’』=idがnextのaタグをクリックされるとバナーが進む。
『scroll』はスクロールに関する機能を設定できます。
 『items: 1』=バナーを1コずつ切り替え
 『easing: “swing”』=切替方法。左からスライドしてくる。
 『pauseOnHover: true』=スライダー にマウスが乗っているときは切り替えを停止。
 『duration: 500』=切替速度を500ミリ秒(0.5秒)に設定。

作成した『slider.js』も同じくサーバーにアップして、carouFredSelを読み込んだ時と同様、headタグ内にタグを記載します。

一般的なhtml

<script type='text/javascript' src='http://xxx.com/xxx/slider.js'></script>

wordpressのheader.phpに記述する場合

<?php wp_enqueue_script('Slider', 'http://xxx.com/xxx/slider.js', array('jquery'));?>

cssで表示を整える

最後にスライダーの表示を整えるためにcssを編集します。これもとりあえず以下のように記載して頂ければと。あとは ご自身のホームページの表示に合わせて微調整して頂ければと思います。cssの説明はそんなに難しいことはやっていませんので割愛します。ただ一度に表示されるバナーの数はバナーの大きさと表示領域の大きさで自動で決定されます。『.caroufredsel_wrapper』の『width』及び『height』で適宜調整して下さい。
.list_carousel {
  margin: 10px 0 10px 5px;
}
.caroufredsel_wrapper{
  position: relative;
  width: 1000px;
  height: 145px;
  overflow: hidden;
}
.list_carousel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
.list_carousel li {
  text-align: center;
  margin: 6px;
  display: block;
  float: left;
}

完成するとこうなるはず!?

はい、ようやく完成です。記事のトップにも掲載しましたがもう一度。以下が完成型です。幅230px程度のバナーが1000pxの領域に4つ並ぶ形になっています。使い方は色々あると思いますので、考えてみてください。

スライダー等のjQueryに関するお問い合わせ

jQueryを使用すると、動きのあるコンテンツを簡単に導入することができます。慣れるまで難しい部分もありますが、一度物にしてしまえばホームページの表現の幅がグンと広がります。Comtopiaではホームページの制作のみならず、jQuery単体の導入ニアkんするお手伝いも実施しております。お気軽にお問い合わせ頂ければと思います。
に関するお問い合わせ

パソコンのトラブルはこちらへ
Pocket

コメントを残す

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