問題を報告するこのページを編集する

カルーセル

カルーセルは、CSS 3D変換を使用して一連のコンテンツを循環表示するためのスライドショーです。一連の画像、テキスト、またはカスタムマークアップで使用できます。前/次のコントロールとインジケーターもサポートしています。

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        caption="First slide"
        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template #img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart(slide) {
        this.sliding = true
      },
      onSlideEnd(slide) {
        this.sliding = false
      }
    }
  }
</script>

<!-- b-carousel.vue -->

ネストされたカルーセルはサポートされていませんのでご注意ください。

サイズ

カルーセルは、スライドのサイズを自動的に正規化しません。そのため、コンテンツを適切にサイズ調整するには、追加のユーティリティまたはカスタムスタイルを使用する必要がある場合があります。各スライドで画像を使用する場合は、すべての画像が同じ寸法（またはアスペクト比）であることを確認してください。

img-srcまたはimg-blankを<b-carousel-slide>で使用する場合、img-widthおよびimg-heightプロパティを<b-carousel>で設定し、これらの値を各carousel-slide画像に自動的に適用させることができます。

画像はまだレスポンシブであり、親コンテナの幅に合わせて自動的に拡大または縮小されることに注意してください。

内部的に、<b-carousel-slide>は<b-img>コンポーネントを使用して画像をレンダリングします。img-*プロパティは、<b-img>で使用可能な対応するプロパティにマップされます。

間隔

カルーセルは、デフォルトで5000ms（5秒）の間隔を使用します。スライド間の間隔を変更するには、intervalプロパティを目的のミリ秒数に設定します。サポートされる最小のスライド間隔は1000ms（1秒）です。

ページの可視性APIがサポートされているブラウザでは、ウェブページがユーザーに表示されていない場合（ブラウザタブが非アクティブな場合、ブラウザウィンドウが最小化されている場合など）、カルーセルはスライドしません。ブラウザタブがアクティブになると、スライドが再開されます。

カルーセルの自動スライドを一時停止するには、intervalプロパティを0に設定します。一時停止したカルーセルを再開するには、intervalを目的のms数に戻します。

カルーセルが一時停止している場合でも、ユーザーはコントロール（有効になっている場合）またはタッチスワイプ（タッチ対応デバイスの場合、無効になっていない場合）を使用してスライドを切り替えることができます。

ユーザーがマウスカーソルをカルーセルに重ねると、自動的に一時停止し、マウスカーソルがカルーセルから離れると自動的に再開されます。この機能を無効にするには、<b-carousel>でno-hover-pauseプロパティを設定します。

コントロールとインジケーター

controlsプロパティを設定して、前と次のコントロールボタンを有効にします。

indicatorsプロパティを設定して、スライドインジケーターボタンを表示します。

インジケーターとコントロールの両方を同時に、または個別に設定できます。

カルーセルのスライドコンテンツ

b-carousel-slideは、スライドにコンテンツを配置するためのいくつかのプロパティとスロットを提供します。

プロパティ

  • caption スライドのメインタイトルとして使用するテキスト（carousel-captionクラスを持つ内部要素内に配置）
  • text タイトルの下に配置されるテキスト（carousel-captionクラスを持つ内部要素内に配置）
  • img-src スライドの背景に配置される画像のURL
  • caption-html captionプロパティの代替プロパティで、HTML文字列をサポートします。
  • html textプロパティの代替プロパティで、HTML文字列をサポートします。

警告：ユーザーが提供したコンテンツを表示するためにcaption-htmlとhtmlプロパティを使用する場合は注意してください。ユーザーが提供した文字列を事前にサニタイズしない場合、 XSS攻撃に対してアプリケーションが脆弱になる可能性があります。

名前付きスロット

  • default carousel-captionクラスを持つ内部要素内に配置されるコンテンツ。captionおよびtextプロパティのコンテンツの後に表示されます。
  • img スライドの背景に配置するコンテンツ。スロットの名前にもかかわらず、defaultスロットまたはcaptionおよびtextプロパティを使用する代わりに、このスロットにほぼすべてのコンテンツを配置できます。

カルーセルは、デフォルトでスライドアニメーションを使用します。スライドアニメーションをクロスフェードアニメーションに変更するか、アニメーションを完全に無効にすることができます。

クロスフェードアニメーション

<b-carousel>のfadeプロパティをtrueに設定して、デフォルトのスライドアニメーションではなく、フェードトランジションを使用してスライドをアニメーション化します。

<div>
  <b-carousel
    id="carousel-fade"
    style="text-shadow: 0px 0px 2px #000"
    fade
    indicators
    img-width="1024"
    img-height="480"
  >
    <b-carousel-slide
      caption="First Slide"
      img-src="https://picsum.photos/1024/480/?image=10"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Second Slide"
      img-src="https://picsum.photos/1024/480/?image=12"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Third Slide"
      img-src="https://picsum.photos/1024/480/?image=22"
    ></b-carousel-slide>
  </b-carousel>
</div>

<!-- b-carousel-fade.vue -->

アニメーションの無効化

<b-carousel>のno-animationプロパティをtrueに設定して、スライドアニメーションを無効にします。

<div>
  <b-carousel
    id="carousel-no-animation"
    style="text-shadow: 0px 0px 2px #000"
    no-animation
    indicators
    img-width="1024"
    img-height="480"
  >
    <b-carousel-slide
      caption="First Slide"
      img-src="https://picsum.photos/1024/480/?image=10"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Second Slide"
      img-src="https://picsum.photos/1024/480/?image=12"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Third Slide"
      img-src="https://picsum.photos/1024/480/?image=22"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Fourth Slide"
      img-src="https://picsum.photos/1024/480/?image=23"
    ></b-carousel-slide>
  </b-carousel>
</div>

<!-- b-carousel-no-animation.vue -->

スライドの折り返し

通常、カルーセルがスライドリストの一方の端またはもう一方の端に達すると、スライドリストの反対の端に折り返して、循環を続けます。

カルーセルのスライドの折り返しを無効にするには、no-wrapプロパティをtrueに設定します。

小型画面でのスライドテキストコンテンツの非表示

小型画面では、キャプションと見出しを非表示にする場合があります。<b-carousel-slide>のcontent-visible-upプロパティを使用して、それを行うことができます。このプロパティはブレークポイント名（つまり、sm、md、lg、xl、またはカスタムブレークポイント名（定義済みの場合））を受け入れ、ブレークポイントより小さい画面で、見出しとキャプションを非表示にします。

タッチスワイプサポート

タッチ対応デバイスでは、ユーザーはカルーセルを左右にスワイプしてスライドを切り替えることができます。タッチコントロールを無効にするには、no-touchプロパティをtrueに設定します。

v-modelサポート

v-model（valueプロパティにバインドされます）を使用して、表示されているスライドをプログラムで制御します。スライドのインデックスは0から始まることに注意してください。

プログラムによるスライド制御

<b-carousel>インスタンスは、スライドを制御するためのいくつかの公開メソッドを提供します。

メソッド 説明
setSlide(index) indexで指定されたスライドに移動します。
next() 次のスライドに移動します。
prev() 前のスライドに移動します。
pause() スライドの循環を一時停止します。
start() スライドの自動再生を開始します（プロパティintervalに値を設定する必要があります）

これらのメソッドを呼び出すには、カルーセルインスタンスへの参照（this.$refs経由）が必要です。

<template>
  <b-carousel ref="myCarousel" .... >
    <!-- slides go here -->
  </b-carousel>
</template>

<script>
  export default {
    // ...
    methods: {
      prev() {
        this.$refs.myCarousel.prev()
      },
      next() {
        this.$refs.myCarousel.next()
      }
    }
  }
</script>

アクセシビリティ

カルーセルは、一般的にアクセシビリティ標準に完全に準拠していませんが、可能な限りアクセシビリティを向上させるよう努めています。

idプロパティを介してドキュメント固有の値を提供することにより、<b-carousel>はアクセシビリティ機能を有効にします。すべてのコンポーネントにIDを追加することを強くお勧めします。

すべてのカルーセルのコントロールとインジケーターには、ariaラベルがあります。これらは、さまざまなlabel-*プロパティを設定することでカスタマイズできます。

注記：このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。詳細は、アクセシビリティドキュメントの低モーションに関するセクションを参照してください。

コンポーネントリファレンス

ソースコードを見る

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
(昇順でソートするにはクリック)
型
(昇順でソートするにはクリック)
デフォルト値
説明
background
文字列カルーセルの背景のCSSカラーを設定します。
controls
ブール値false前後のコントロールを有効にします。
fade
ブール値false設定すると、スライドアニメーションがスライド効果ではなくクロスフェードに変更されます。
id
文字列レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
img-height
数値または文字列すべてのb-tab子のデフォルトの画像の「height」属性を設定します。
img-width
数値または文字列すべてのb-tab子のデフォルトの画像の「width」属性を設定します。
indicators
ブール値false特定のスライドにジャンプするためのインジケーターボタンを有効にします。
interval
数値5000スライド間の遅延時間（ミリ秒）を設定します。
label-goto-slide
文字列'スライドへ移動'スライドインジケーターコントロールの「aria-label」へのプレフィックスを設定します。スライド番号（1から始まるインデックス）が接尾辞として追加されます。
label-indicators
文字列'表示するスライドを選択'インジケーターコントロールのラッパーの「aria-label」を設定します。
label-next
文字列'次のスライド'次のスライドコントロールの「aria-label」値を設定します。
label-prev
文字列'前のスライド'前のスライドコントロールの「aria-label」値を設定します。
no-animation
ブール値false設定すると、スライド間の遷移時のアニメーションが無効になります。
no-hover-pause
ブール値false設定すると、現在スライドがホバーされている場合のスライドショーの一時停止が無効になります。
no-touch
ブール値falseタッチスワイプによるスライド制御を無効にします。
no-wrap
v2.0.0+ 		ブール値false終了時にスライドショーを再開しません。
value
v-model 		数値0現在アクティブなスライド（0から始まるインデックス）
プロパティ
イベント
valueinput
名前
説明
default カルーセルに配置するコンテンツ（スライド）
イベント
引数
説明
sliding-end
  1. slide - スライドされたスライド番号
新しいスライドへの遷移が終了したときに発生します。
sliding-start
  1. slide - スライドされているスライド番号
新しいスライドへの遷移が開始したときに発生します。
ソースコードを見る

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
(昇順でソートするにはクリック)
型
(昇順でソートするにはクリック)
デフォルト値
説明
background
文字列スライドの背景色として使用するCSSカラー
caption
文字列キャプションに配置するテキストコンテンツ
caption-html
注意して使用してください 		文字列キャプションに配置するHTML文字列コンテンツ
caption-tag
文字列'h3'キャプションラッパーのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
content-tag
文字列'div'コンテンツラッパーのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
content-visible-up
文字列テキストコンテンツの表示を開始するブレークポイントを指定します。常にテキストコンテンツを表示するには、デフォルトのままにします。
id
文字列レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
img-alt
文字列画像の「alt」属性の値を設定します。
img-blank
ブール値false設定されている場合、img-srcの代わりに空の画像がレンダリングされます。
img-blank-color
文字列'transparent'空の画像の塗りつぶしとして使用するCSSカラーを設定します。
img-height
数値または文字列すべてのb-tab子のデフォルトの画像の「height」属性を設定します。
img-src
文字列画像のURLを設定します。
img-width
数値または文字列すべてのb-tab子のデフォルトの画像の「width」属性を設定します。
text
文字列スライドのテキストに配置するテキストコンテンツ
text-html
注意して使用してください 		文字列スライドのテキストに配置するHTML文字列コンテンツ
text-tag
文字列'p'テキストコンテンツのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。

注意：HTML文字列をサポートするプロパティ（*-html）は、生のユーザー提供値を渡すとクロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。ユーザー入力を最初に適切にサニタイズする必要があります。

名前
説明
default カルーセルのスライドに配置するコンテンツ
img img要素または画像コンポーネントのスロット

個々のコンポーネントのインポート

次の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント
名前付きエクスポート
インポートパス
<b-carousel>BCarouselbootstrap-vue
<b-carousel-slide>BCarouselSlidebootstrap-vue

例

import { BCarousel } from 'bootstrap-vue'
Vue.component('b-carousel', BCarousel)

Vue.jsプラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート
インポートパス
CarouselPluginbootstrap-vue

例

import { CarouselPlugin } from 'bootstrap-vue'
Vue.use(CarouselPlugin)