JavaScript

カスタマイズも自由にできるjQuery「bxSlider」の使い方

個人的にかなりよさげなjQueryスライダーを使ってみました。その名もbxSlider。もしかして結構有名なのかもしれませんが…
色々とオプションもありカスタマイズもしやすかったので今後の為にもメモしときます。

[ads_center]

bxSliderの使い方

基本的にはよくあるjQueryプラグインと同じです。まずはこちらからファイルをダウンロードします。

ダウンロードしたZIPファイルを解凍するとjquery.bxSlider.min.jsというファイルが入っているのでこれをhead内に読み込みます。ちなみにjquery.easing.1.3.jsというファイルもありますがこちらはスライドのモーションなどを変えたい時に使用するのでデフォルトでもいい場合は特に必要ありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.bxSlider/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>

あとはスライドしたいコンテンツをマークアップします。スライドを括る要素idにslider1をつけます。

<ul id="slider1">
  <li>スライドコンテンツ1</li>
  <li>スライドコンテンツ2</li>
  <li>スライドコンテンツ3</li>
  <li>スライドコンテンツ...</li>
</ul>

以上です。めっちゃ簡単です。

色々あるオプション

もっとカスタマイズしたいという人にはオプションがあるので色々と指定してあげて下さい。たとえばこんな感じ。

$(function(){
  $('#slider1').bxSlider({
    auto: true,
    autoControls: true,
    speed: 800,
    randomStart: true,
    prevText: '前へ',
    nextText: '次へ'
  });
});
auto
自動再生するかしないかです。デフォルトではfasle
autoControls
startとstopを表示するかどうかです。デフォルトはfasle
speed
スライドのスピードの設定です。数値を上げると遅く下げると早くなります。デフォルトは500
randomStart
最初に表示するスライドをランダムに設定します。
prevText/nextText
デフォルトではnextとprevで表示されます。これを好きな文字に変更できます。ここでは「前へ」と「次へ」

こんな感じでまだまだ色んなオプションがあるので色々試してみるとおもしろいです。bxSliderのページにはいくつかサンプルがありますので気になる人はそちらをご覧下さい。

かなり便利なCSSフレームワーク「960 Grid System」を使ってみた前のページ

ローカル環境のMAMPでWordPressをマルチサイト化してみる次のページ

関連記事

  1. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  2. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  3. Clock Timepicker Plugin for jQuery
  4. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  5. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  6. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

コメント

  1. この記事へのコメントはありません。

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP