概要

• bootstrap-vueを利用して、画面一杯の画像の上に文字を配置するスニペット
• あまりピッタリくるドキュメントがなかったので記載しています
• 使い方間違っていたらそっと教えてください
• 下記のような、トップ画面によくありそうなイメージです

スニペット

全貌

<!-- 画像自体は、画面幅一杯に表示したいので、flued指定 -->
<b-container fluid class="px-0">
  <b-row>
    <b-col md="12">
      <b-carousel fade>
        <b-carousel-slide>
          <!-- カルーセルさせる画像をb-cardで指定 -->
          <!-- かつ、overlayを指定 -->
          <template v-slot:img>
            <b-card
              overlay
              class="w-100"
              img-src="images/1.jpg"
              img-height="420"
              text-variant="white"
            >
              <!-- この内部は自由 -->
              <b-container>
                <b-row>
                  <b-col md="12">
                    <h3 class="mt-3">
                      <small>2020.1.11-2.10</small>
                      <p class="mt-1 display-4">
                        Some Text Title
                      </p>
                    </h3>
                    <p class="mt-5">Some text here.</p>
                    <b-button size="lg">Some Link</b-button>
                  </b-col>
                </b-row>
              </b-container>
            </b-card>
          </template>
        </b-carousel-slide>
      </b-carousel>
    </b-col>
  </b-row>
</b-container>

以下の様にカルーセルのslotにb-cardを組み合わせて使うのがミソですね。 かつoverlayを指定しているのもポイント。

<b-carousel-slide>
  <template v-slot:img>
    <b-card
      overlay
      class="w-100"
      img-src="images/1.jpg"
      img-height="420"
      text-variant="white"
    >
(省略)

よくあるパターンだと思うので、Bootstrap-vueのカルーセルのサンプルにあってもほしかったです。

皆さんの助けになれば幸いです。

参考

• https://bootstrap-vue.org/docs/components/carousel
• https://bootstrap-vue.org/docs/components/card