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のページにはいくつかサンプルがありますので気になる人はそちらをご覧下さい。

関連記事

  1. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  2. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  3. Before and after slider
  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  6. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

コメント

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP