カルーセル

How it works

カルーセルは、CSS 3D トランスフォームと JavaScript で構築された、一連のコンテンツを循環させるためのスライドショーです。一連の画像、テキスト、カスタムマークアップで動作します。また、前/次のコントロールやインジケータもサポートしています。

Page Visibility がサポートされているブラウザでは、ブラウザのタブがアクティブではない場合やウィンドウが最小化されいる場合など、ページが表示されていない場合はカルーセルは動きません。

入れ子になっているカルーセルはサポートされていません。カルーセルは一般的にアクセシビリティ基準に準拠していないことに注意してください。

カルーセルは、スライドの寸法を自動的に正規化しません。そのため、コンテンツのサイズを適切に調整するために、追加のユーティリティやカスタムスタイルを使用する必要がある場合があります。カルーセルは前/次のコントロールやインジケータをサポートしていますが、明示的に必須ではありません。カスタマイズしてください。

Example

control属性を追加して前後のコントロールを追加します。

vue

<template>
 <Carousel control>
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Indicators

カルーセルには、コントロールと並んでインジケーターを追加することもできますこのインジケータにより、ユーザーは特定のスライドに直接ジャンプすることができます。

vue

<template>
 <Carousel
  control
  indicators
 >
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Captions

CarouselItem コンポーネント内に CarouselCaption コンポーネントを使用して、スライドにキャプションを追加できます。

以下に示すように、オプションの display utilities を使用することで、小さいビューポートで簡単に非表示にすることができます。

最初は display="none" で非表示にし、中型のデバイスでは display="md-none を使用します。

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

vue

<template>
 <Carousel
  control
  indicators
 >
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>First slide label</h5>
     <p>Some representative placeholder content for the first slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Second slide label</h5>
     <p>Some representative placeholder content for the second slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Third slide label</h5>
     <p>Some representative placeholder content for the third slide.</p>
    </CarouselCaption>
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Crossfade

fade 属性をカルーセルに追加すると、スライドの代わりにフェードトランジションでスライドをアニメーションさせることができます。

vue

<template>
 <Carousel
  fade
  control
 >
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Slides only

スライドのみのカルーセルです。

カルーセルの画像に .d-blockと .w-100 があることに注意してください。

vue

<template>
 <Carousel>
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Individual `CarouselItem` interval

CarouselItem コンポーネントに interval 属性を追加して、自動的に次のアイテムに切り替わるまでの遅延時間を変更します。

vue

<template>
 <Carousel
  control
  indicators
 >
  <CarouselInner>
   <CarouselItem interval="10000">
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem interval="2000">
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Disable touch swiping

左右のスワイプによるスライド間の移動をサポートしています。

これを無効にするには、touch 属性を使用します。

以下の例では、ride 属性を含まず、touch="false" としているため、自動再生されません。

vue

<template>
 <Carousel
  touch="false"
  control
 >
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Dark variant

コントロール、インジケーター、キャプションを暗くするには、Carousel コンポーネントに dark 属性を追加します。

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

vue

<template>
 <Carousel
  dark
  control
  indicators
 >
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>First slide label</h5>
     <p>Some representative placeholder content for the first slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Second slide label</h5>
     <p>Some representative placeholder content for the second slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Third slide label</h5>
     <p>Some representative placeholder content for the third slide.</p>
    </CarouselCaption>
   </CarouselItem>
  </CarouselInner>
 </Carousel>
</template>

Methods

Method	Description
`cycle`	アイテムを左から右へ循環させます
`pause`	アイテムを循環するのを停止します
`prev`	前のアイテムに循環します
`next`	次のアイテムに循環します
`to`	特定のアイテムに循環させます

demo

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Fourth slide label

Some representative placeholder content for the third slide.

Fifth slide label

Some representative placeholder content for the third slide.

vue

<template>
 <Carousel
  id="demoCarouselId"
  ref="demoCarousel"
 >
  <CarouselInner>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>First slide label</h5>
     <p>Some representative placeholder content for the first slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Second slide label</h5>
     <p>Some representative placeholder content for the second slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Third slide label</h5>
     <p>Some representative placeholder content for the third slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/daan-evers-tKN1WXrzQ3s-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Fourth slide label</h5>
     <p>Some representative placeholder content for the third slide.</p>
    </CarouselCaption>
   </CarouselItem>
   <CarouselItem>
    <CarouselItemImage
     width="800"
     src="/unsplash/image/cafe/ceyda-ciftci-e-9eDRBH4S4-unsplash.jpg"
    />
    <CarouselCaption>
     <h5>Fifth slide label</h5>
     <p>Some representative placeholder content for the third slide.</p>
    </CarouselCaption>
   </CarouselItem>
  </CarouselInner>
 </Carousel>
 <b-button
  color="primary"
  @click="cycleClicked"
 >
  cycle
 </b-button>
 <b-button
  color="primary"
  @click="pauseClicked"
 >
  pause
 </b-button>
 <b-button
  color="secondary"
  @click="prevClicked"
 >
  ←prev
 </b-button>
 <b-button
  color="secondary"
  @click="nextClicked"
 >
  next→
 </b-button>
 <Dropdown margin="t-2">
  <DropdownToggle color="primary">
   To
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem
    v-for="n in 5"
    :key="n"
    @click="toClicked(n - 1)"
   >
    {{ n }}
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

<script setup lang="ts">
const demoCarousel = ref(null);
const toClicked = (id: number) => {
 if (demoCarousel.value) {
  demoCarousel.value.to(id);
 }
};

const cycleClicked = () => {
 if (demoCarousel.value) {
  demoCarousel.value.cycle();
 }
};
const pauseClicked = () => {
 if (demoCarousel.value) {
  demoCarousel.value.pause();
 }
};
const prevClicked = () => {
 if (demoCarousel.value) {
  demoCarousel.value.prev();
 }
};
const nextClicked = () => {
 if (demoCarousel.value) {
  demoCarousel.value.next();
 }
};
</script>

Bootstrap

Browse docs

カルーセル

How it works

Example

Indicators

Captions

First slide label

Second slide label

Third slide label

Crossfade

Slides only

Individual `CarouselItem` interval

Disable touch swiping

Dark variant

First slide label

Second slide label

Third slide label

Methods

demo

First slide label

Second slide label

Third slide label

Fourth slide label

Fifth slide label

Bootstrap

Browse docs

カルーセル

How it works

Example

Indicators

Captions

First slide label

Second slide label

Third slide label

Crossfade

Slides only

Individual CarouselItem interval

Disable touch swiping

Dark variant

First slide label

Second slide label

Third slide label

Methods

demo

First slide label

Second slide label

Third slide label

Fourth slide label

Fifth slide label

Individual `CarouselItem` interval