轮播效果(Carousel)

轮播效果是一种幻灯片显示，用于循环显示使用CSS 3D转换构建的一系列内容，并可以处理一系列图像，文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。

Blank Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.

Slide #: 4
Sliding: false

<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 v-slot: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-slide> 上使用 img-src 或 img-blank 时，可以通过 <b-carousel> 上的 img-width 和 img-height 属性设置图像的宽度和高度，并将这些值自动应用到每个 carousel-slide 图像上。

注意，图像仍然是响应的，并自动增长或缩小，以适应其父容器的宽度。

在内部，<b-carousel-slide> 使用 <b-img> 组件渲染图像。img-* 属性映射到 <b-img> 可用的相应属性。

间隔

轮播默认间隔为 5000 毫秒（5秒）。您可以通过将 interval 属性设置为所需的毫秒数来更改幻灯片之间的间隔。支持的最小滑动间隔为1000毫秒（1秒）。

在支持 Page Visibility API 的浏览器中，当用户看不见网页时，轮播会避免滑动（例如，当浏览器选项卡处于非活动状态，浏览器窗口最小化等）。当浏览器选项卡处于活动状态时，将恢复滑动。

暂停轮播

要从自动滑动中暂停轮播，请将 interval 属性设置为 0 。要重新启动已暂停的轮播，请将 interval 重新设置为所需的毫秒数。

当轮播暂停时，用户仍然可以通过控件（如果已启用）或触摸滑动（如果未禁用，则在已启用触摸的设备上）切换幻灯片。

当用户的鼠标悬停在转盘上时，它将自动暂停，并且当鼠标离开转盘时将自动重新启动。要禁用此功能，请设置 no-hover-pause 属性。

控制和指示器

设置属性 controls 以启用前一个和后一个控件按钮。

设置属性 indicators 以显示滑动指示器按钮。

指示器和控件都可以同时设置或独立设置。

轮播幻灯片内容

b-carousel-slide 提供了多个属性和插槽，用于将内容放置在幻灯片中。

属性

caption：用作幻灯片上主要标题的文本（放置在具有 carousel-caption 类的内部元素内）
text：标题下的文本（放置在具有 carousel-caption 类的内部元素内）
img-src：要放在幻灯片背景中的图像的URL
caption-html： caption 属性的 Alternate 属性，它支持HTML字符串
html： text 属性的 Alternate 属性，它支持HTML字符串

警告： 请谨慎使用 caption-html 和 html 道具显示用户提供的内容，因为如果不先清理用户提供的字符串，它可能会使您的应用程序容易受到 XSS 攻击。

命名插槽

default 将放置在具有 carousel-caption 类的内部元素内部的内容。出现在 caption 和 text 属性的任何内容之后。
img 放置在幻灯片背景中的内容。尽管有插槽的名称，但您几乎可以将任何内容放置在该插槽中，而不必使用 default（默认）的插槽 caption 和 text 属性。

轮播动画

默认情况下，轮播使用滑动动画。您可以将幻灯片动画更改为淡入淡出动画，也可以完全禁用动画。

淡入淡出动画

将 <b-carousel> fade 属性设置为 true ，可以使用淡入淡出过渡而不是默认幻灯片动画来对幻灯片进行动画处理。

Second Slide

<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> no-animation 属性设置为 true 以禁用幻灯片动画。

First slide

Second Slide

Third Slide

Fourth Slide

<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>

循环轮播

通常，当转盘到达幻灯片列表中的一端或另一端时，它将绕到幻灯片列表的另一端并继续循环。

要禁用循环轮播，请将 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` 属性必须有一个值）

你需要一个对 carousel 实例的引用（通过 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-* 属性进行定制。

组件参考

`<b-carousel>`

查看源代码

<b-carousel> 属性
<b-carousel> v-model
<b-carousel> 事件

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在呈现的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`label-prev`	String	`'Previous Slide'`	设置上一个幻灯片控件的“ aria-label”值
`label-next`	String	`'Next Slide'`	设置上一个幻灯片控件的“aria-label”值
`label-goto-slide`	String	`'Goto Slide'`	设置滑动指示器控件上“ aria-label”的前缀。将在幻灯片编号后缀（索引号为1）
`label-indicators`	String	`'Select a slide to display'`	在指标控件包装上设置“aria-label”
`interval`	Number	`5000`	设置幻灯片之间的延迟时间（以毫秒为单位）
`indicators`	Boolean	`false`	启用指示器按钮以跳到特定幻灯片
`controls`	Boolean	`false`	启用上一个和下一个控件
`no-animation`	Boolean	`false`	设置时，在幻灯片之间切换时禁用动画
`fade`	Boolean	`false`	设置后，将幻灯片动画更改为淡入淡出而不是滑动效果
`no-wrap` v2.0.0+	Boolean	`false`	到达终点时请勿重新开始幻灯片放映
`no-touch`	Boolean	`false`	禁止通过触摸滑动来控制幻灯片
`no-hover-pause`	Boolean	`false`	设置后，当悬停当前幻灯片时，将禁用幻灯片放映
`img-width`	Number or String		为所有 b-tab 子项设置默认图像的 'width' 属性
`img-height`	Number or String		为所有 b-tab 子项设置默认图像的 'height' 属性
`background`	String		设置轮播背景的CSS颜色
`value` v-model	Number	`0`	当前活动的幻灯片（索引值为0）

v-model

属性	事件
`value`	`input`

事件

事件	参数	描述
`sliding-start`	`slide` - 正在滑到的幻灯片编号。	开始过渡到新幻灯片时发出。
`sliding-end`	`slide` - 滑到的幻灯片编号。	过渡到新幻灯片时结束时发出。

`<b-carousel-slide>`

查看源代码

<b-carousel-slide> 属性
<b-carousel-slide> 插槽

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在呈现的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础
`img-src`	String		设置图像的URL
`img-alt`	String		设置图像上“alt”属性的值
`img-width`	Number or String		为所有b-tab子项设置默认图像的 “width” 属性
`img-height`	Number or String		为所有b-tab子项设置默认图像的 “height” 属性
`img-blank`	Boolean	`false`	如果设置，将呈现空白图像，而不是img-src
`img-blank-color`	String	`'transparent'`	设置CSS颜色以用作空白图像的填充
`content-visible-up`	String		指定将开始显示文本内容的断点。保留默认值以始终显示文本内容
`content-tag`	String	`'div'`	指定要渲染的HTML标签，而不是内容包装的默认标签
`caption`	String		放置在标题中的文本内容
`caption-html` Use with caution	String		HTML字符串内容放置在标题中。谨慎使用
`caption-tag`	String	`'h3'`	指定要渲染的HTML标签，而不是字幕包装程序的默认标签
`text`	String		文本内容放置在幻灯片的文本中
`text-html` Use with caution	String		HTML字符串内容放置在幻灯片的文本中。谨慎使用
`text-tag`	String	`'p'`	指定要渲染的HTML标签，而不是文本内容的默认标签
`background`	String		用作幻灯片背景颜色的CSS颜色

注意： 当传递原始用户提供的值时，支持HTML字符串（*-html）的道具可能容易受到跨站点脚本（XSS）攻击。您必须先对用户输入进行正确的清理！

插槽

插槽名称	描述
`img`	img元素或图像组件的插槽

导入单个组件

您可以通过以下指定的导出将各个组件导入到您的项目中：

组件	命名输出	导入路径
`<b-carousel>`	`BCarousel`	`bootstrap-vue`
`<b-carousel-slide>`	`BCarouselSlide`	`bootstrap-vue`

示例：

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

作为Vue.js插件导入

这个插件包含了上面列出的所有组件。插件还包括任何组件别名。

命名输出	导入路径
`CarouselPlugin`	`bootstrap-vue`

示例：

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

轮播效果(Carousel)

Blank Image

尺寸

间隔

暂停轮播

控制和指示器

轮播幻灯片内容

属性

命名插槽

轮播动画

淡入淡出动画

Second Slide

禁用动画

First slide

Second Slide

Third Slide

Fourth Slide

循环轮播

在小屏幕上隐藏幻灯片文本内容

触摸滑动支持

v-model 支持

程序化滑动控制

辅助功能

组件参考

属性

v-model

事件

属性

插槽

导入单个组件

作为Vue.js插件导入

`v-model` 支持