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

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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives