シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN
標準でもしくはオプションで実現できそうなこと
スワイプ
キャプション表示
サムネイルナビゲーション
高さ自動調整
複数表示のカルーセル
縦スライド
など
スクリプト
<link href="jquery.bxslider.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.bxslider.min.js" type="text/javascript"></script>
実装
<div id="div1153"> <ul class="bxslider"> <li><img src="画像1" title="キャプション1" /></li> <li><img src="画像2" title="キャプション2" /></li> <li><img src="画像3" title="キャプション3" /></li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>
画像に合わせてwidthを調整できるようにする
スクリプトでulにラッパーDIV(class="bx-wrapper")が生成され、width:100%が設定されます。
なので、さらに上位にラッパーをつくっておいてそこに横幅を設定しておきます。max-にしておくとレスポンシブを崩さないでおけると思います。
#div1153 { max-width: 400px; }
Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
オプション
<script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade', // スライド効果 'horizontal'(デ):横にスライド / 'vertical':縦にスライド / 'fade':フェードスライド touchEnabled: false, // スワイプ効果 true(デ):有効 adaptiveHeight: true, // 高さ自動調整 false(デ):無効 captions: true // キャプション表示 false(デ):無効 });}); </script>
関連記事
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
- PREV
- recursive設定によるfind()性能改善
- NEXT
- 独自のバリデーションルールを作成
Comment
jQuery | シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 http://t.co/n4aqWvv3ZM