轮播

轮播是一个用于循环播放一系列内容的幻灯片，它使用 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 -->

请注意，不支持嵌套轮播。

尺寸

轮播不会自动标准化幻灯片尺寸。因此，您可能需要使用其他实用程序或自定义样式来适当地调整内容大小。在每个幻灯片中使用图片时，请确保它们都具有相同的尺寸（或宽高比）。

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

请注意，图像仍将具有响应性，并且会自动增大或缩小以适应其父容器的宽度。

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

间隔

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

在支持页面可见性 API 的浏览器中，当网页对用户不可见时（例如当浏览器选项卡处于非活动状态、浏览器窗口最小化等），Carousel 将避免滑动。当浏览器选项卡处于活动状态时，滑动将恢复。

暂停 Carousel

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

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

当用户鼠标悬停在轮播图上时，它将自动暂停，当鼠标离开轮播图时，它将自动重新启动。要禁用此功能，请在 <b-carousel> 上设置 no-hover-pause prop。

控件和指示器

设置 prop controls 以启用上一个和下一个控件按钮。

设置 prop indicators 以显示幻灯片指示器按钮。

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

轮播幻灯片内容

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

Props

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

警告：谨慎使用 caption-html 和 html prop 来显示用户提供的内容，因为它可能会使你的应用程序容易受到 XSS 攻击的攻击，如果你没有首先清理用户提供的内容。

命名插槽

default 内容将放置在内部元素中，该元素具有类 carousel-caption。出现在 caption 和 text 道具的任何内容之后。
img 内容放置在幻灯片的背景中。尽管插槽的名称如此，但你可以将几乎任何内容放置在此插槽中，而不是使用 default 插槽或 caption 和 text 道具。

Carousel 动画

Carousel 默认使用滑动动画。你可以将幻灯片动画更改为交叉淡入淡出动画，或完全禁用动画。

交叉淡入淡出动画

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

幻灯片环绕

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

若要禁用 Carousel 幻灯片环绕，请将 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 媒体查询。有关更多详细信息，请参阅我们可访问性文档的减少运动部分。

组件参考

`<b-carousel>`

查看源代码

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

属性

所有属性默认值都全局可配置。

属性 (点击按升序排列)	类型 (点击按升序排列)	默认	描述
`background`	`字符串`		设置轮播背景的 CSS 颜色
`controls`	`布尔值`	`false`	启用上一个和下一个控件
`fade`	`布尔值`	`false`	设置后，将幻灯片动画更改为交叉淡化，而不是滑动效果
`id`	`字符串`		用于设置呈现内容的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`img-height`	`数字` 或 `字符串`		为所有 b-tab 子项设置默认图像“高度”属性
`img-width`	`数字` 或 `字符串`		为所有 b-tab 子项设置默认图像“宽度”属性
`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 开始索引）

`v-model`

属性	事件
`value`	`input`

插槽

名称	描述
`default`	要放置在轮播中的内容（幻灯片）

事件

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

`<b-carousel-slide>`