シンプルでカスタマイズ豊富なスライダー用プラグイン「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 - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

no image

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

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

no image

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

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

no image

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

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

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

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

no image

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

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

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

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

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

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

Comment

Message

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

*

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

    PAGE TOP ↑