[K] jQueryプラグイン「BX Slider」を使ってトップの記事リストを動かしてみた

最終更新日:
Screenshot 2012 06 05 21 27 07

自分のブログはいつでも実験台。どうも、@knk_nです。

以前、最新記事や同カテゴリの関連記事といった記事リストをブログ上部に設置しました。
今回、そいつを自動でスライドさせちゃおうというお話です。

WordPressで記事上に最新記事などの記事リストを並べる方法
コチラの記事が元になっております よろしければ是非

トップ記事を動かしてみようと思い立ったのは二つの理由があるからです。

  1. 四つしか置けない
  2. スライダー系のプラグインを使ってみたかった

SPONSORED LINK

1. 四つしか置けない

私がブログトップに四つの記事を置いているのは理由があります。なぜなら四つしか置けないから。

そのまんますぎて「お前、大丈夫か?」とツッコまれそうですが、サムネイルのサイズやタイトルを表示させることを考えても四つがいいとこでしょう。

もう少し置く方法があったなら是非試したい。これが理由の一つ目。

2. スライダー系のプラグインを触ってみたかった

今までさんざん「実験」と称して見よう見まねで多くのプラグインを触ってきましたが、スライダー系のプラグインはまだ未経験。

スライダーを使っているダイナミックなWEBページを見る度に「自分もいつかは」と思っていましたがようやく機が熟したようです。

BX Sliderを使ってみた

「jQuery スライダー」でググればそれっぽいプラグインは山ほど出てきます。
私はこちらの記事で紹介されていた「BX Slider」を使ってみました。

クライアントワークでよくお世話になっているjQueryプラグインいろいろ
いつもありがとうございます!

一度に表示する数やスライドする数などオプションを好みに変更して使えるみたいです。おもしろそう!

jQuery content slider carousel image slideshow | bxSlider
本家様のページ

BX Sliderの使い方

1. ファイルをダウンロード

本家様のページよりファイルをダウンロードします。
このページにはコードとともにいくつかデモも用意されているのであわせて見ておくといいです。
MITライセンスなのでコード冒頭のライセンス宣言はそのままで。

2. ファイルをアップロードする

必要なファイルをサーバにアップロードします。私は

  • jquery.bxSlider.min.js
  • jquery.easing.1.3.js

をアップロードしました。

3. ヘッダに少しコードを

jQueryの宣言と合わせてコードを少し。srcにはアップロードしたファイルの場所を。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.bxSlider.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.easing.js"></script>

4. スライダーの中身を書く

<ul id="slider">
  <li>ひとつ目のコンテンツ</li>
  <li>二つ目のコンテンツ</li>
  <li>三つ目のコンテンツ</li>
  <li>以下略</li>
</ul>

よくあるリスト形式や

<div id="slider">
  <div>ひとつ目のコンテンツ</div>
  <div>二つ目のコンテンツ</div>
  <div>三つ目のコンテンツ</div>
  <div>以下略</li>
</div>

このようにdivで囲ってもいいようです。

5. スライドの挙動を設定

スライドの動きの設定を書きます。

<script type="text/javascript">
$(document).ready(function() {
  $('#slider').bxSlider({
    auto: true,
    autoControls: false,
    controls: true,
    pager: false,
    mode: 'horizontal',
    speed: 1000,
    autoHover: true,
    pause:    4000,
    easing: 'swing',
    displaySlideQty: 4, /* 一度に表示する数 */
    moveSlideQty: 1 /* スライドする数 */
  });
});
</script>

WEBデザインレシピ様の記事のコードを基本にして挙動を設定しました。
私の使い方で変更が必要だった部分にのみコメントを付けてあります。
詳細はWEBデザインレシピ様の記事をご覧ください。

細かな部分はCSSでちょこちょこ修正。

左右の「前へ」「次へ」にはShanaBrian Website様の矢印アイコンを使わせていただきました。

矢印アイコン(マーク) | Web素材 | ShanaBrian Website
ありがとうございます。

設置してみた結果

こうしてトップの記事リストがスライドするようになりました。とりあえず10記事を4つの枠の中でスライドさせています。
パッと見はあまり変わりません。動いているだけです。

まだ設置して数時間ですがメリットとしては

  • たくさんの記事を見てもらいやすく
  • 動いているので目を引く

あたりが挙げられ、
デメリットとしては

  • 表示が遅くなる
  • 少し重いかも(10記事というのが多すぎるのか)

あたりが挙げられますかね。

苦労して設置したのにデメリットのほうが大きいという。

おわりに

トップページなど「ここぞ!」というときに使うと目を引くページが作れますよ。
今回である程度使い方がわかったので、機会があればもう少しちゃんと使ってみたい!

Categories:
Tags:
記事が気に入ったらシェアお願いします!