Carousel

Examples

Switching items

Use the index prop to control the currently displayed item.

Index

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

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}
</style>

Progress indicator

Use the indicator prop to specify the type of progress indicator.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Indicator type</h4>
    <veui-radio-group
      v-model="indicator"
      :items="indicators"
    />
    <h4>Indicator position（仅在对齐方式是 end 时生效）</h4>
    <veui-radio-group
      v-model="indicatorPosition"
      :items="positions"
    />
    <h4>Indicator align</h4>
    <veui-radio-group
      v-model="align"
      :items="alignments"
    />
  </section>
  <section>
    <veui-carousel
      :datasource="items"
      :indicator="indicator"
      :indicator-position="indicatorPosition"
      :indicator-align="align"
    />
  </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: 'bar',
      indicatorPosition: 'inside',
      align: 'start',
      indicators: [
        { label: 'bar', value: 'bar' },
        { label: 'number', value: 'number' },
        { label: 'dot', value: 'dot' },
        { label: 'none', value: 'none' }
      ],
      alignments: [
        { label: 'start', value: 'start' },
        { label: 'end', value: 'end' }
      ],
      positions: [
        { label: 'inside', value: 'inside' },
        { label: 'outside', value: 'outside' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;

  &:not(:first-child) {
    margin-top: 10px;
  }
}

section {
  margin-bottom: 10px;
}
</style>

Autoplay

Specify the autoplay prop to enable automatic playback.

You can also use the autoplay prop to enable autoplay, use the wrap prop to enable looping and use the pause-on-hover prop to pause playing when cursor hover step indicators.

Edit this demo on GitHubEdit

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

Switching effects

Specify the effect prop to set the switching effect.

Effect type

FadeSlide

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Effect type</h4>
    <veui-radio-group
      v-model="effect"
      :items="effects"
    />
  </section>
  <section>
    <veui-carousel
      :datasource="items"
      :effect="effect"
    />
  </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'
        }
      ],
      effect: 'fade',
      effects: [
        { label: 'Fade', value: 'fade' },
        { label: 'Slide', value: 'slide' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}
</style>

Vertical layout

Specify the vertical prop to enable a vertically oriented carousel.

Use the controls-position prop to switch the position of the buttons relative to the layout direction.

Controls position

InsideOutside

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Controls position</h4>
    <veui-radio-group
      v-model="position"
      :items="positions"
    />
  </section>
  <section>
    <veui-carousel
      :datasource="items"
      effect="slide"
      :controls-position="position"
      vertical
    />
  </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'
        }
      ],
      position: 'inside',
      positions: [
        { label: 'Inside', value: 'inside' },
        { label: 'Outside', value: 'outside' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}
</style>

View and group

Use the slides-per-view prop to specify how many carousel items to display at the same time.

Use the slides-per-group prop to specify how many carousel items are included in each forward/backward switch.

2 view, 2 group

2 view, 1 group

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>2 view, 2 group</h4>
    <veui-carousel
      :datasource="items"
      :slides-per-group="2"
      :slides-per-view="2"
      effect="slide"
      indicator-position="outside"
      indicator-align="end"
      wrap
    />
    <h4>2 view, 1 group</h4>
    <veui-carousel
      :datasource="items"
      :slides-per-group="1"
      :slides-per-view="2"
      effect="slide"
      indicator-position="outside"
      indicator-align="end"
      wrap
    />
  </section>
</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'
        },
        {
          src:
            'https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/1b61ee88fdb4a4b918816ae1cfd84af1_fullsize.jpg',
          alt: 'Tesla logo.',
          label: '特斯拉'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}
</style>

Aspect ratio

Set the slide-aspect-ratio prop to specify the aspect ratio of each carousel item.

按 `2/1` 比例展示轮播项

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>按 `2/1` 比例展示轮播项</h4>
    <veui-carousel
      :datasource="items"
      effect="slide"
      indicator-align="end"
      slide-aspect-ratio="2/1"
    />
  </section>
</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'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}
</style>

API

Props

Name Type Default Description

datasource

Array<Object>

[]

Carousel data source, with item type: {src, alt, label, type}.

Name	Type	Description
`src`	`string`	Media source URL.
`alt`	`string`	Alternative description text of the media.
`label`	`string`	Descriptive title of the media.
`type`	`string`	Descriptive title of the media, specify `video` for videos.

index

number

0

.sync

The current index of the carousel.

indicator

string

'radio'

The display mode of the progress indicator.

Value	Description
`bar`	Radio button type, used to replace the previous `radio` (which is also kept compatible).
`number`	Display "current page number/total page number" text prompt.
`dot`	Dot type.
`none`	Do not display the indicator.

switch-trigger

string

'click'

When displaying the radio button type indicator, the operation to trigger the switch.

Value	Description
`click`	Switch when clicked.
`hover`	Switch when hovering.

autoplay boolean false Whether to auto play.

pause-on-hover boolean false Whether to pause when hovering in auto play.

interval number 3000 The interval time in milliseconds for switching in auto play.

wrap boolean false Whether to enable infinite loop playing.

effect 'fade' | 'slide' 'fade' Specify the transition effect of the carousel, where fade only works when the number of switching groups is the same as the number of items displayed simultaneously.

vertical boolean false Whether the carousel is in vertical layout.

indicator-align 'start' | 'end' start Used to support the position of the indicator relative to the layout direction.

indicator-position 'outside' | 'inside' inside Used to support the position of the indicator inside/outside the carousel container.

controls boolean false Whether to display the switching buttons.

controls-position 'outside' | 'inside' inside Used to support the position of the switching buttons relative to the layout direction.

slide-aspect-ratio number= | '${number}/${number}' - Specify the default configuration for different types of carousel items.

options Object { video: { muted: true, autoplay: true, controls: true, loop: true } } Used to specify the aspect ratio of each carousel item.

slides-per-view number 1 Specify the number of carousel items displayed simultaneously.

slides-per-group number 1 Specify the number of carousel items per group to switch forward and backward each time.

lazy

boolean= | { preload: number }

false

Specify whether to lazy load carousel resources.

Name	Description
`false`	Do not lazy load resources.
`true`	Preload the resources before and after the currently displayed item.
`{ preload: number }`	Preload the specified number of resources before and after the currently displayed item.

Slots

Name Description

Name	Description
`item`	Used to customize the area of each carousel item. Default content: Carousel item image. The scope parameter is the content of each item in the `datasource` prop (which can have custom properties) plus `index: number` representing the index of the carousel item. Therefore, the entire value bound by `slot-scope` is `{src, alt, label, index, ...}`.

item

Used to customize the area of each carousel item.

Default content: Carousel item image.

The scope parameter is the content of each item in the datasource prop (which can have custom properties) plus index: number representing the index of the carousel item. Therefore, the entire value bound by slot-scope is {src, alt, label, index, ...}.

Events

Name	Description
`change`	Triggered after switching, with the callback parameter `(to: number, from: number)`. `to` represents the index after switching, and `from` represents the index before switching.

Icons

Name	Description
`prev`	Previous page.
`next`	Next page.

CSS

Name	Type	Default	Description
`--dls-carousel-transition-duration`	`<time>`	`0.2s`	The duration of the carousel item transition animation.
`--dls-carousel-slide-gutter`	`<length>`	`0`	The spacing between carousel items when multiple items are displayed at the same time.

Edit this page on GitHubEdit