シンプルでカスタマイズ豊富なスライダー用プラグイン「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>
  • このエントリーをはてなブックマークに追加

関連記事

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

no image

テキストに装飾効果を付けるプラグイン

Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

Comment

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑