ギャラリー

Bootstrapギャラリー - 無料の例、テンプレート、チュートリアル

Bootstrap 5で作成されたレスポンシブギャラリー。画像ギャラリー、ビデオギャラリー、写真ギャラリー、フルページ、eコマース、ライトボックス、スライダー、サムネイルなど。

静止画像

静的画像の使用例です。

詳細については、 画像のドキュメントをご覧ください。

Show code Edit in sandbox

HTML

<!-- Gallery -->
<div class="row">
  <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Wintry Mountain Landscape"
    />
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Mountains in the Clouds"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water"
    />
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Waves at Sea"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
      class="w-100 shadow-1-strong rounded mb-4"
      alt="Yosemite National Park"
    />
  </div>
</div>
<!-- Gallery -->

カルーセル / スライダー

カルーセル（「スライダー」とも呼ばれる）は、写真、ビデオ、テキストなどの異なる要素をスライドショーで循環させます。

詳細については、 カルーセルのドキュメントをご覧ください。

最初のスライドラベル

Nulla vitae elit libero, a pharetra augue mollis interdum.

2番目のスライドラベル

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3番目のスライドラベル

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code Edit in sandbox

HTML

<!-- Carousel wrapper -->
<div
  id="carouselBasicExample"
  data-mdb-carousel-init class="carousel slide carousel-fade"
  data-mdb-ride="carousel"
>
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button data-mdb-button-init
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="0"
      class="active"
      aria-current="true"
      aria-label="Slide 1"
    ></button>
    <button data-mdb-button-init
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="1"
      aria-label="Slide 2"
    ></button>
    <button data-mdb-button-init
      type="button"
      data-mdb-target="#carouselBasicExample"
      data-mdb-slide-to="2"
      aria-label="Slide 3"
    ></button>
  </div>

  <!-- Inner -->
  <div class="carousel-inner">
    <!-- Single item -->
    <div class="carousel-item active">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
        class="d-block w-100"
        alt="Sunset Over the City"
      />
      <div class="carousel-caption d-none d-md-block">
        <h5>最初のスライドラベル</h5>
        <p>
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        </p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
        class="d-block w-100"
        alt="Canyon at Nigh"
      />
      <div class="carousel-caption d-none d-md-block">
        <h5>2番目のスライドラベル</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>

    <!-- Single item -->
    <div class="carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
        class="d-block w-100"
        alt="Cliff Above a Stormy Sea"
      />
      <div class="carousel-caption d-none d-md-block">
        <h5>3番目のスライドラベル</h5>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        </p>
      </div>
    </div>
  </div>
  <!-- Inner -->

  <!-- Controls -->
  <button data-mdb-button-init
    class="carousel-control-prev"
    type="button"
    data-mdb-target="#carouselBasicExample"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前へ</span>
  </button>
  <button data-mdb-button-init
    class="carousel-control-next"
    type="button"
    data-mdb-target="#carouselBasicExample"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">次へ</span>
  </button>
</div>
<!-- Carousel wrapper -->

複数アイテムカルーセル

利用可能なクラスの組み合わせを使用することで、各スライドに複数のアイテムを表示するカルーセルを作成できます。

より高度なオプションや複数アイテムカルーセルの例については、複数アイテムカルーセルのドキュメントをご覧ください。