PbTimes 情報誌

めちゃくちゃ使いやすいスライダー - jQueryプラグイン「bxslider」

2013/10/08

• Plugin
• jQuery

これは使いやすい！

概要

bxslider というjQueryプラグインの紹介です。
これを使用することでとても簡単にいろいろなスライダーを実現することができるのです。

あまりjQueryに詳しくない方でも、これなら簡単に設定できちゃいます。
是非お試しください。

ダウンロード

さっそくダウンロードしてみましょう。
bxslider
右上の「Download」をクリックすることで取得できます。

メニューの「Example」をクリックすることで一通りの設定方法を確認することができます。

設定例

まず、ダウンロードしたフォルダを設置します。
そして、「jquery.bxslider.css」と「jquery.bxslider.min.js」を読込みます。

<script src="jquery.bxslider.min.js" type="text/javascript"></script>
<link href="jquery.bxslider.css" rel="stylesheet" type="text/css" media="all" />

こんな感じです。
次にHTMLで画像を表示します。
ulのクラスに「bxslider」を設定するだけです。

<ul class="bxslider">
  <li><img src="/hill_trees.jpg" /></li>
  <li><img src="/me_trees.jpg" /></li>
  <li><img src="/houses.jpg" /></li>
</ul>

最後にJavaScriptを記述します。

$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});

たったこれだけでスライダーが実現できます。
めちゃくちゃ簡単ですよね！

.bxSliderで使用できるオプションも多く用意されています。
オプション
こちらのページからご確認ください。