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

関連記事

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

Comment

Message

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

*

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

PAGE TOP ↑