消毒
Bootstrap を使用してスライダーを作成します。いくつかの簡単な手順で独自のブートストラップスライダーを作成する方法ブートストラップ 3 のレスポンシブカルーセル

Bootstrap を使用してスライダーを作成します。いくつかの簡単な手順で独自のブートストラップスライダーを作成する方法ブートストラップ 3 のレスポンシブカルーセル

Twitter Bootstrap 3 は、コンテンツ管理システムの開発と維持に最適な CSS フレームワークの 1 つです。 Bootstrap では、Twitter Bootstrap グリッドシステム (グリッドレイアウト) を使用して、ブログやポートフォリオを簡単に作成できます。多くの CMS システムの中心には、通常、「スライダー」(カルーセル) と呼ばれる基本的なコンポーネントがあります。基本的には、画像の自動順次表示ですが、最新の完成したプロジェクト、顧客からの証言、特別な説明を表示することもできます。オファー、ブログからのニュースまたは最近の記事へのリンク。この記事では、Twitter Bootstrap 3 の Carousel コンポーネントを使用してスライダーを作成する方法を見ていきます。

Bootstrap 3 カルーセル Twitter コンポーネントの紹介

カルーセルコンポーネントのマークアップは次のようになります。

>
>

...
>
>
...
>

>
>

>
>
>

上記のコードから、Bootstrap 3 スライダーがいくつかの部分に分割されていることがわかります。

ポインター
スライダーの内容
コントロール

要素を変換するには分周スライダーで、クラス名を追加します。 カルーセルと 滑り台. クラス カルーセル「カルーセル」効果を作成します。つまり、スライドを円形に変更します。クラス 滑り台右側または左側からのスライドアニメーションを追加します。ポインターはスライダーの下部にある小さな円で、スライドの現在の位置とスライドの数を示します。ポインターは、順序付きリストを使用して作成されます。

>
>

順序付きリストにはクラスがあります カルーセルインジケーター、子要素を小さな円に変換します。各要素李属性が必要です データターゲット親コンテナー ID を使用します。属性も持っている必要があります データスライド先一意の数値で、特定のスライドを参照するには、値は「0」で始まる必要があります。

...
>
>
...
>

クラスを持つ各要素 アイテム次の 2 つのサブセクションがあります。画像と カルーセルキャプション. 画像はスライドの背景として使用されます。クラスを持つ要素 カルーセルキャプション画像の上に配置され、スライドのタイトルとして使用されます。中身 カルーセルキャプション、追加できます

またはタグ、またはその両方。

コントロールは左右の矢印で実行され、スライドを手動で変更するために使用されます。

「グリフィコングリフィコン-シェブロン-左」> >
>

「グリフィコングリフィコン-シェブロン-右」> >
>
>

各方向に 1 つずつ、合計 2 つの要素が必要です。最初の要素は スパンクラスを持つ要素 グリフィコングリフィコン-シェブロン-左、これは左矢印アイコンであり、2 番目の要素にはクラスがあります グリフィコングリフィコン-シェブロン-右、右矢印です。 Bootstrap では、画像の代わりにフォントを使用してアイコンを表示できます。

それで全部です！サイトのスライダーが正常に作成されました。また、JavaScript コードを 1 行も記述しませんでしたが、bootstrap.js がすべてを実行してくれました。

カルーセル設定

スライダーをさらにカスタマイズするには、いくつかの属性を追加できますデータ-*カルーセルの親コンテナ用。

"データ間隔" は、スライドを切り替える時間間隔を指定するために使用されます。数値を取り、その数値はミリ秒単位である必要があります。
"データ一時停止" は、一時停止イベントが発生するタイミングを決定するために使用されます。たとえば、" ホバー"、マウスがスライダーの上にあると、スライドの切り替えが停止します。
"データラップ" はブール属性で、スライドリストの最後に達した場合にスライドの切り替えを再開するかどうかを設定できます。

jQueryによるカスタマイズ

jQuery と data-* 属性を使用したい場合、Bootstrap では JavaScript による初期化が可能です。これを行うには、次のコードを記述できます。

$(".carousel") .carousel() ;

カルーセルの設定は、オプションを使用して設定できます。例えば：

$(".carousel")
間隔: 2000
一時停止: "ホバー" ,
ラップ: 真
} ) ;

次のコードを使用して、スライダーイベントを手動でトリガーすることもできます。

.carousel("pause") // 一時停止
.carousel("cycle") // スライドを有効にする
.carousel(3) // 4 番目のスライドを表示
.carousel("prev") // 前のスライドを表示
.carousel("next") // 次のスライドを表示

上記のメソッドは、任意の JavaScript コードから呼び出して、スライダーの通常の動作を制御できます。標準の矢印の代わりに独自のボタンを表示したい場合は、prev メソッドと next メソッドが非常に便利です。特にカルーセルレイアウトの外にある場合。

結論

この記事は、何千行もの JavaScript コードを書かずにスライダーを作成する方法を学びたい人に役立つはずです。間違いなく、これにより開発速度が向上します。最も重要なことは、このソリューションはクロスブラウザーであるため、古いブラウザーで動作させるために髪を引き裂く必要がないことです.

ご不明な点がございましたら、当社をご利用ください

循環要素のスライドショーコンポーネント - 画像カルーセルまたはテキストスライド。

使い方

カルーセルは、CSS 3D 変換と一部の JS に基づいて一連のコンテンツを表示するためのスライドショーです。テキスト、画像、または通常のマークアップで動作します。また、次/前のボタンもサポートしています。

例

カルーセルは、スライドコンテンツのサイズを自動的に正規化しません。したがって、コンテンツを適切なサイズにするために追加のユーティリティが必要になる場合があります。カルーセルが前/次のボタンをサポートしている限り、明示的に追加する必要はありません。それらを自分で追加してカスタマイズします。

特にページで多くのカルーセルを使用する場合は、柔軟性のために .carousel クラスに一意の ID を指定します。

スライドのみ

スライドのみのカルーセルの例を次に示します。カルーセル画像に .d-block および .img-fluid クラスが存在することに注意してください。これらの目的は、ブラウザーが画像の配置をデフォルトにしないようにすることです。

コントロール付き

前へ/次へのボタンを追加します。

インジケータ付き

コントロールと共にインジケーターをカルーセルに追加することもできます。

初期アクティブ要素が必要です

.active クラスをいずれかのスライドに追加する必要があります。追加しないと、カルーセルが表示されません。

碑文あり

.carousel-item クラスのカルーセル要素に .carousel-caption クラス要素を追加して、スライドにキャプションを追加します。小さいデバイスでは、表示ユーティリティを使用してラベルを簡単に非表示にできます。これらは最初は .d-none クラスで非表示になり、.d-md-block クラスで中型デバイスで再び表示されます。

最初のスライドラベル

Nulla vitae elit libero、pharetra augue mollis interdum。

2 番目のスライドラベル

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3 番目のスライドラベル

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

"carousel-caption d-none d-md-block">

...

使用法

属性を通して

data-slide 属性は値 prev または next を取り、現在の位置に対するスライドの位置を変更します。または、 data-slide-to を使用して、 2: data-slide-to="2" のように index のスライドに移動します。スライドインデックスは 0 から始まります。

data-ride="carousel" 属性は、カルーセルアニメーションの作成に使用されます。 JavaScript による明示的なカルーセルの初期化と組み合わせることはできません。

JavaScript 経由

カルーセルを手動で呼び出します。

$(".carousel"). カルーセル()

オプション

パラメーターは、属性または JavaScript を介して渡すことができます。属性を使用するには、パラメーター名を data- に追加します (例: data-interval="" )。

名前	の種類	デフォルトでは	説明
間隔	番号	5000	自動スライド変更間の遅延時間。 false の場合、カルーセルは自動的にスライドを変更しません。
キーボード	ブール値	真実	カルーセルがキーボードイベントに応答するかどうか。
一時停止	文字列 \| ブール値	ホバー	"hover" が設定されている場合、スライドの変更は mouseenter で遅くなり、mouseleave で変更が開始されます。 false の場合、カルーセルにカーソルを合わせてもスライドの変更は停止しません。タッチアクティベートデバイス: "ホバー" - タッチエンド (ユーザーがカルーセルとの対話を終了したとき) で 2 回一時停止し、スライドを再度変更します。この動作は、上記のマウスの動作に追加されることに注意してください。
乗る	ライン	間違い	ユーザーが最初にスライドを手動で変更した後、カルーセルスライドを自動変更します。カルーセルの場合 - 読み込み後に自動変更が有効になります。
包む	ブール値	真実	カルーセルがスムーズに変化するか、個別に変化するか。

メソッド

非同期メソッドと遷移

すべての API メソッド 非同期そして打ち上げ遷移. それらは、トランジションの開始時にそれらを呼び出した関数に返されますが、 最後まで. さらに、コンポーネントでメソッドを呼び出し、 トランジションの実行は無視されます.

.carousel(オプション)

指定されたオプションでカルーセルオブジェクトを初期化し、スライドトランジションを開始します。

$(".carousel"). カルーセル (( 間隔: 2000 ))

.carousel("サイクル")

カルーセルスライドを左から右に変更します。

.carousel("一時停止")

スライド遷移を停止します。

.carousel(数値)

スライドを特定のポイント (0 ベース、行と同様) までスクロールします。

.carousel("前の")

前のスライドにスクロールします。 「ターゲット」要素が表示される前の関数呼び出しの値を返します(つまり、slid.bs.carousel イベントが発生する前)。

.carousel("次")

次のスライドへ。 「ターゲット」要素が表示される前の関数呼び出しの値を返します(つまり、slid.bs.carousel イベントが発生する前)。

.carousel("破棄")

アイテムのカルーセルを破壊します。

開発

Bootstrap のカルーセルには、機能を適用する 2 つのイベントがあります。両方のイベントには、次の追加のプロパティがあります。

方向: スライドが移動する方向 (「左」または「右」)。
relatedTarget: 「フリックされた」スライドの位置に移動する DOM 要素。
from: 現在のスライドのインデックス
to: 次のスライドのインデックス

すべてのカルーセルイベントは、カルーセルで直接発生します (つまり、

$("#myCarousel" ). on ("slide.bs.carousel" , function () ( // 何かを実行… ))

Bootstrap フレームワークの要素から何か新しいことを学びたいと思っている皆さん、こんにちは。今日のトピックは Bootstrap Carousel スライダーです。これは、ほぼすべての Web サイトに存在する人気のある要素です。

したがって、カルーセルスライダーを作成する方法、これに必要な組み込みツール、パラメーターを構成する方法を説明し、記事の最後に特定の例の実装を示します。そして今、ビジネスに取り掛かりましょう！

Bootstrap Carousel プラグインツールについて

カルーセルフォトギャラリーは、新しいオファー、製品、現在のプロモーションのリスト、便利なポートフォリオ表示などを提示するために使用されます。したがって、今日、このプラグインを次の場所で使用できることが重要です。正式名称ブートストラップカルーセルプラグイン。

説明されている要素は、Internet Explorer 9 以前のバージョンでは適切にサポートされていないことに注意してください。ただし、(WordPress、Joomla!、およびその他のエンジンの場合、フレームワークの接続は非常に簡単です) でうまく機能します。

すべてのパラメーターを簡単に操作し、スライダーをすばやくカスタマイズするには、Bootstrap 3 の主要な組み込みクラスを学習する必要があります。

クラス	目的
カルーセル	カルーセルスライダー自体を作成します。
滑り台	スライド切り替え時のアニメーションやトランジションの効果をcssで追加します。クラスはオプションです。
カルーセルインジケーター	いわば、各画像の下部に小さな点の形でコントロールパネルを追加します。これにより、任意の画像にすばやく切り替えることができます。クラスはオプションです。
カルーセル内側	スライド自体をギャラリーに追加します。
カルーセルキャプション	グラフィックファイルへの署名を担当します。ご希望により同梱可能です。
アイテム	各スライドの一連のコンテンツを定義します。
右/左カルーセルコントロール	フレームを切り替えるために、名前に従って左右のボタンを追加します。

さらに、そのようなギャラリーのレイアウトの他の機能を知っておく価値があります。

手始めに、Carousel ブロック自体を作成するには宣言が必要です。 id="myCarousel"後者の正しい機能のために。

同じdivで、属性を登録する必要があります data-ride="カルーセル"これは、ページが読み込まれるとすぐにアニメーションが読み込まれるように指定します。

それでは、指標に移りましょう。各 li タグには、いくつかの属性が必要です。 データターゲット特定のカルーセルの ID を指す、および データスライド先、どのフレーム番号に移動するかを決定します。

画像を前後に切り替えるボタンについては、実装するには属性を登録する価値があります データスライド「prev」または「next」のいずれかのキーワードを使用します。

これで、特定の方法でスライダーの表示を編集できるおかげで、フレームワークの基本要素について理解できました。当然、自動フレームスクロール、画像キャプション、またはサイドボタンを無効にすることができます。

代替制御メカニズム

Bootstrap の組み込みクラスの使用に加えて、. したがって、JS には、$.carousel () ツールを介してのみ、すべて同じアクションを実装する多くのメソッドとオプションがあります。その中には、次のようにリストできます。

知識テスト

さて、ここで、資料をどのように学んだかを確認し、得られた知識を統合する時が来ました。これを行うには、「カルーセル」を作成するために必要な各アクションについて説明します。

まず、必要なスクリプトとスタイルを含める必要があります。のほうが好きですが、フレームワークは公式 Web サイトからダウンロードできます ( http://getbootstrap.com/) をダウンロードし、ダウンロードしたファイルをプロジェクトディレクトリのルートに配置します。

私に同意する場合は、ドキュメントのヘッダーに次のように記述します。

1 2 3

2 番目の方法を支持する場合は、リンクの最初の部分ではなく、ファイルへのパスを挿入する必要があります。

スライダーに実装する必要があります。これを行うには、習得した知識を使用して、必要なコードを順番に記述します。

説明されている楽器を担当する共通ブロックを開きます。
制御インジケータを指定するためのブロック。
スライド自体のブロック。
サイドボタンの実装。

このリストから除外できるのは、2 番目と最後の div のみです。

これで、コードを書く準備が整いました。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

カルーセルギャラリーの例

/*メインブロックを作成*/

/*スライドを埋める*/

カルーセルギャラリーの例

/*メインブロックを作成*/

/*画像の数に応じて 4 つの指標を示します*/ /*スライドを記入します*/ /*サイドコントロールボタンの作成*/

画像要素またはカルーセルテキストスライドを反復処理するためのスライドショーコンポーネント。 Page Visibility API をサポートするブラウザでは、Web ページがユーザーに表示されていない場合 (たとえば、ブラウザが非アクティブである場合、ブラウザウィンドウが最小化されている場合など)、カルーセルはスライドの切り替えを回避します。 ネストされたカルーセルはサポートされていません。

例

アニメーションは Internet Explorer 9 ではサポートされていません

Bootstrap はアニメーションに CSS3 のみを使用しますが、Internet Explorer 9 は必要な CSS プロパティをサポートしていません。そのため、このブラウザを使用した場合のスライド遷移アニメーションはありません。トランジション用の jQuery ベースのフォールバックを意図的に含めないようにしました。

初期アクティブ要素が必要

.active クラスをいずれかのスライドに追加する必要があります。そうしないと、カルーセルが表示されません。