bootstrap_カルーセル作成について

 


htmlを作成して その一部として

image01 ~ image05の pngファイルを

順番に表示していくカルーセルも作成する場合、


javascriptあるいは jQueryなしで、

つまり htmlと bootstrapのみで作成することは

可能なのでしょうか?




はい、可能です。

BootstrapにはJavaScriptやjQueryを使わずに

カルーセルを作成するための組み込み機能が用意されています。

BootstrapのCSSクラスとHTMLだけを使って

カルーセルを作成する方法を以下に示します。


### 必要なステップ


1. **BootstrapのCSSをインポート**


   - CDNを使ってBootstrapのCSSをインポートします。



2. **HTML構造**


   - Bootstrapが提供するカルーセル用のHTML構造を使用します。


以下は具体的なサンプルコードです。



---


### HTMLコード


```html


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap Carousel</title>

    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 

rel="stylesheet">

</head>


<body>

    <div class="container mt-5">

        <!-- Carousel -->

        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">

            <!-- Indicators -->

            <div class="carousel-indicators">

                <button type="button" 

data-bs-target="#carouselExample" 

data-bs-slide-to="0" class="active" 

aria-current="true" aria-label="Slide 1"></button>

                

<button type="button" 

data-bs-target="#carouselExample" 

data-bs-slide-to="1" aria-label="Slide 2"></button>

                

<button type="button" 

data-bs-target="#carouselExample" 

data-bs-slide-to="2" aria-label="Slide 3"></button>

                

<button type="button" 

data-bs-target="#carouselExample" 

data-bs-slide-to="3" aria-label="Slide 4"></button>

                

<button type="button" 

data-bs-target="#carouselExample" 

data-bs-slide-to="4" aria-label="Slide 5"></button>

            </div>


            <!-- Carousel items -->

            <div class="carousel-inner">

                <div class="carousel-item active">

                    <img src="image01.png" class="d-block w-100" alt="Image 01">

                </div>

                <div class="carousel-item">

                    <img src="image02.png" class="d-block w-100" alt="Image 02">

                </div>

                <div class="carousel-item">

                    <img src="image03.png" class="d-block w-100" alt="Image 03">

                </div>

                <div class="carousel-item">

                    <img src="image04.png" class="d-block w-100" alt="Image 04">

                </div>

                <div class="carousel-item">

                    <img src="image05.png" class="d-block w-100" alt="Image 05">

                </div>

            </div>


            <!-- Controls -->

            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">

                <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                <span class="visually-hidden">Previous</span>

            </button>

            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">

                <span class="carousel-control-next-icon" aria-hidden="true"></span>

                <span class="visually-hidden">Next</span>

            </button>

        </div>

    </div>


    <!-- Bootstrap Bundle with Popper (includes JavaScript) -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>



```


---


### 説明

1. **カルーセルの識別子**: 

`id="carouselExample"` を使用し、カルーセル全体を識別します。


2. **`carousel-inner`クラス**:

   - `carousel-item` はスライドごとに使用されるクラスです。

   - 最初のスライドには `active` クラスを付けます。

3. **インジケーター**: 

スライドのインジケーターとして使用するボタンを 

`carousel-indicators` に定義します。


4. **コントロール**: 

次へ・前へ移動するボタンが 

`carousel-control-prev` と `carousel-control-next` で作成されます。


---


### ポイント

- JavaScriptなしでも動作するデザインが提供されますが、

`data-bs-ride="carousel"` のようなBootstrapの組み込み属性を使用すると、

スライドの自動切り替えが有効になります。

- 自動スライドを停止したい場合は、`data-bs-ride="carousel"` を削除します。


これで、HTMLとBootstrapのみでカルーセルを作成することができます。



コメント