Bootstrap Carousel: �始者のガイド

こんにちは、Web開発者の志願者さんたち！今日は、Bootstrap Carouselsの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータの先生として、私はこの旅をステップバイステップで案内します。しっかりと座り、楽しい乗り物の準備をしましょう！

概要：カルーセルって何？

写真アルバムをめくることを思い浮かべてくださいが、ページをめくる代わりに、写真が魔法のようにスライドして表示されるのです。それが、ウェブページ上のカルーセルがやっていることです！それは、通常は画像を視覚的に魅力的な方法でサイクルするスライドショーです。

基本例から始めましょう：

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="最初のスライド">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="2番目のスライド">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="3番目のスライド">
</div>
</div>
</div>

このコードは、3枚の画像を持つシンプルなカルーセルを作成します。carousel-innerクラスはスライドを含み、各carousel-itemは単一のスライドを表します。最初のアイテムがactiveクラスを持っていることに注意してください - これはBootstrapに最初に表示するスライドを伝えます。

インジケーター：道を指す

さあ、カルーセルにナビゲーションを追加してみましょう。インジケーターは、下部に表示される小さなドットで、現在のスライドを示し、特定のスライドにジャンプするのを許可します。

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- carousel-innerコンテンツここに -->
</div>

carousel-indicatorsの各buttonはスライドに対応しています。data-bs-slide-to属性は、クリックされたときにBootstrapが移動するスライドを示します。

キャプション：文脈を追加

スライドにテキストを追加したい場合はどうでしょうか？キャプションが便利です！

<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="最初のスライド">
<div class="carousel-caption d-none d-md-block">
<h5>最初のスライドのラベル</h5>
<p>最初のスライドのためのいくつかの代表するプレースホルダーコンテンツ。</p>
</div>
</div>

carousel-captionクラスはスライドにテキストオーバーレイを作成します。d-none d-md-blockクラスは、小さなスクリーンではキャプションを非表示にし、中程度以上のスクリーンでは表示します。

クロスフェード：スムーズな遷移

カルーセルの遷移をよりスムーズにしたい場合は、クロスフェード効果を試してみてください：

<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- カルーセルコンテンツここに -->
</div>

メインのカルーセルdivにcarousel-fadeクラスを追加すると、スライドがスライドする代わりにフェードインしてフェードアウトします。

オートプレイカルーセル：動かし続ける

カルーセルを自動的にスライドサイクルさせるには、data-bs-ride="carousel"属性を使用します：

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- カルーセルコンテンツここに -->
</div>

これにより、ページが読み込まれた瞬間にカルーセルが開始します。デフォルトでは、5秒ごとにスライドが変わります。

単一の .carousel-item インターバル

異なるスライドを異なる時間で表示したい場合はどうしますか？問題ありません！data-bs-interval属性を使用します：

<div class="carousel-item" data-bs-interval="2000">
<img src="image2.jpg" class="d-block w-100" alt="2番目のスライド">
</div>

このスライドは2秒（2000ミリ秒）表示された後、次のスライドに移動します。

コントロールのないオートプレイカルーセル

オートプレイ卡尔ーセルを表示したいが、可視コントロールを表示したくない場合は、以下のように非表示にできます：

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- carousel-innerコンテンツここに -->
</div>

カルーセルインジケーターとナビゲーションボタンを省略すると、卡尔ーセルはオートプレイで表示され、可視コントロールは表示されません。

タッチスワイプを無効にする

デフォルトでは、Bootstrapはタッチ対応デバイス上でのスワイプを有効にしています。これを無効にするには：

<div id="myCarousel" class="carousel slide" data-bs-touch="false">
<!-- カルーセルコンテンツここに -->
</div>

data-bs-touch="false"属性はタッチスワイプを無効にします。

ダークバージョン

より洗練された外観を試してみたい場合は、ダークバージョンを試してみてください：

<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
<!-- カルーセルコンテンツここに -->
</div>

carousel-darkクラスは、コントロールとインジケーターの色を黒に変え、ライトバックグラウンドに合わせています。

メソッド表

以下は、卡尔ーセルをプログラムaticallyコントロールするために使用できる卡尔ーセルメソッドの便利な表です：

メソッド	説明
cycle	左から右に卡尔ーセルアイテムをサイクル開始します。
pause	カルーセルのアイテムサイクルを停止します。
prev	前のアイテムにサイクルします。
next	次のアイテムにサイクルします。
to	特定のフレーム（0ベース、配列に似ています）に卡尔ーセルをサイクルします。
dispose	要素の卡尔ーセルを破壊します。

これらのメソッドは以下のように呼び出すことができます：

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
carousel.next()

そして、それが全部です、みんな！Bootstrapで素晴らしい、インタラクティブな卡尔ーセルを作成するための道筋が開かれました。練習は完璧を生むもので、さまざまな機能の組み合わせを試してみてください。快適なコーディングをし、あなたの卡尔ーセルが常にスムーズに回転するよう祈っています！

Credits: Image by storyset