「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

画像のスライドショーを簡単に設置出来るjQueryプラグイン「bxslider」の利用方法をご紹介します。

「bxslider」の特徴

  • WEB上に簡単に画像のスライドショーを設置出来ます。
  • オプションが豊富なので多彩な設定が可能です。
  • スマートフォンでのフリック操作にも対応しています。

「bxslider」の導入手順

  1. bxsliderのダウンロードページにアクセスします。
    http://bxslider.com/
  2. ダウンロードしたファイルの内、必要となるのは以下の通りです。
    分類ファイル名 or フォルダ名パス備考
    jsjquery-1.10.2.jsjQuery本体
    ※ダウンロードしたファイル内には含まれていないので「http://jquery.com/download/」などから入手して下さい
    jsjquery.bxslider.min.js\jquery.bxslider
    cssjquery.bxslider.css\jquery.bxslider
    画像images\jquery.bxslidercssファイルと同一ディレクトリ化に設置して下さい。
  3. サンプルソース「HTML」

  4. サンプルソース「jQuery」
  5. 指定可能なオプション

実行サンプル

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">