Baidu DLS

返回 DLS

Carousel 轮播

示例

切换

使用 index 来控制当前显示的项目。

Index

  1. A cute kitty looking at you with its greenish eyes.
当前是第 1 页，共 3 页 
<template>
<article>
  <section>
    <h4>Index</h4>
    <veui-number-input
      v-model="index"
      :min="0"
      :max="items.length - 1"
    />
  </section>
  <section>
    <veui-carousel
      :datasource="items"
      :index.sync="index"
    />
  </section>
</article>
</template>

<script>
import { Carousel, NumberInput } from 'veui'

export default {
  components: {
    'veui-carousel': Carousel,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      items: [
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
          alt: 'A cute kitty looking at you with its greenish eyes.',
          label: 'Cat'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
          alt: 'A common kingfisher flying above river.',
          label: 'Kingfisher'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
          alt: 'A white and gray dolphin in blue water.',
          label: 'Dolphin'
        }
      ],
      index: 0
    }
  }
}
</script>

进度指示器类型

使用 indicator 属性来指定进度指示器类型。

Indicator type

  1. A cute kitty looking at you with its greenish eyes.
当前是第 1 页，共 3 页 
<template>
<article>
  <section>
    <h4>Indicator type</h4>
    <veui-radio-group
      v-model="indicator"
      :items="indicators"
    />
  </section>
  <section>
    <veui-carousel
      :datasource="items"
      :indicator="indicator"
    />
  </section>
</article>
</template>

<script>
import { Carousel, RadioGroup } from 'veui'

export default {
  components: {
    'veui-carousel': Carousel,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      items: [
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
          alt: 'A cute kitty looking at you with its greenish eyes.',
          label: 'Cat'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
          alt: 'A common kingfisher flying above river.',
          label: 'Kingfisher'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
          alt: 'A white and gray dolphin in blue water.',
          label: 'Dolphin'
        }
      ],
      indicator: 'radio',
      indicators: [
        { label: 'Radio', value: 'radio' },
        { label: 'Number', value: 'number' },
        { label: 'None', value: 'none' }
      ]
    }
  }
}
</script>

自动切换

指定 autoplay 属性来允许自动播放。

  1. A cute kitty looking at you with its greenish eyes.
当前是第 1 页，共 3 页

还可以使用 interval 属性来指定自动播放的切换间隔时长，使用 wrap 属性来允许循环播放，以及使用 pause-on-hover 属性来时光标悬浮在指示器对应项时暂停自动播放。

<template>
<article>
  <veui-carousel
    :datasource="items"
    autoplay
    pause-on-hover
    :interval="5000"
  />
</article>
</template>

<script>
import { Carousel } from 'veui'

export default {
  components: {
    'veui-carousel': Carousel
  },
  data () {
    return {
      items: [
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
          alt: 'A cute kitty looking at you with its greenish eyes.',
          label: 'Cat'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
          alt: 'A common kingfisher flying above river.',
          label: 'Kingfisher'
        },
        {
          src:
            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
          alt: 'A white and gray dolphin in blue water.',
          label: 'Dolphin'
        }
      ],
      autoplay: true,
      pauseOnHover: true
    }
  }
}
</script>

API

属性

名称类型默认值描述
datasourceArray<Object>[]

轮播图数据源，项目类型为：{src, alt, label}。

名称类型描述
srcstring图片源地址。
altstring图片的降级描述文本。
labelstring图片的描述性标题。
indexnumber=0

.sync

当前轮播图序号。

indicatorstring='radio'

播放进度指示器的显示模式。

值描述
radio单选按钮型。
number显示「当前页数/全部页数」文字提示。
none不显示指示器。
switch-triggerstring='click'

当显示单选型指示器时，触发切换的操作。

值描述
click点击时切换。
hover鼠标悬浮时切换。
autoplayboolean=false是否自动轮播。
pause-on-hoverboolean=false在自动轮播时，鼠标悬浮后是否暂停。
intervalnumber=3000在自动轮播时，切换间隔的毫秒数。
wrapboolean=false是否可以循环播放。

插槽

名称描述
item

可用来定制每个轮播项的区域。

默认内容：轮播项图片。

作用域参数为 datasource 属性每个列表项的内容（可以有自定义字段）加上 index: number 表示轮播项的序号。即整个 slot-scope 绑定的值为 {src, alt, label, index, ...}。

事件

名称描述
change

切换后触发，回调参数为 (to: number, from: number)。分别表示切换后的序号和切换前的序号。

图标

名称描述
prev上一页。
next下一页。