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. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  2. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  3. jQuery Hero Slider Plugin
  4. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  5. Inspiration for Grid Loading Animations
  6. jQuery Navobile

コメント

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP