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. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  2. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  3. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  6. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

コメント

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP