Carousel

Demos

Index

Interval (in ms)

Size

Compactness

Indicator types

Others

<template>
<article>
  <section>
    <h4>Index</h4>
    <veui-number-input
      v-model="index"
      ui="tiny"
      :min="0"
      :max="items.length - 1"
    />
    <h4>Interval (in <code>ms</code>)</h4>
    <veui-number-input
      v-model="interval"
      ui="tiny"
      :min="1000"
      :step="1000"
    />
  </section>
  <section>
    <h4>Size</h4>
    <veui-radio-group
      v-model="size"
      :items="sizes"
    />
  </section>
  <section>
    <h4>Compactness</h4>
    <veui-radio-group
      v-model="style"
      :items="styles"
    />
  </section>
  <section>
    <h4>Indicator types</h4>
    <veui-radio-group
      v-model="indicator"
      :items="indicators"
    />
  </section>
  <section>
    <h4>Others</h4>
    <veui-checkbox v-model="wrap">
      Repated
    </veui-checkbox>
    <veui-checkbox v-model="autoplay">
      Autoplay
    </veui-checkbox>
    <veui-checkbox v-model="pauseOnHover">
      Pause on hover
    </veui-checkbox>
  </section>
  <section>
    <veui-carousel
      :datasource="items"
      :index.sync="index"
      :interval="interval"
      :wrap="wrap"
      :autoplay="autoplay"
      :pause-on-hover="pauseOnHover"
      :indicator="indicator"
      :ui="ui"
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-carousel': Carousel,
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox,
    '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'
        }
      ],
      index: 0,
      interval: 3000,
      wrap: true,
      autoplay: true,
      pauseOnHover: true,
      sizes: [
        { label: 'Small', value: 'small' },
        { label: 'Normal', value: 'normal' },
        { label: 'Large', value: 'large' }
      ],
      size: 'normal',
      styles: [
        { label: 'Normal', value: 'normal' },
        { label: 'Loose', value: 'loose' }
      ],
      style: 'normal',
      indicators: [
        { label: 'Radio', value: 'radio' },
        { label: 'Number', value: 'number' },
        { label: 'Tab', value: 'tab' },
        { label: 'None', value: 'none' }
      ],
      indicator: 'radio'
    }
  },
  computed: {
    ui () {
      return [this.size, this.style].filter(s => s !== 'normal').join(' ')
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
looseLoose style, displays switching buttons and indicators outside the container.
largeLarge size.
smallSmall size.
datasourceArray<Object>[]

The media datasource for the carousel, with the item type being {src, alt, label}.

NameTypeDescription
srcstringThe source of the image.
altstringThe alternate text of the image.
labelstringDescriptive title of the image. Displayed when the indicator is shown as switchable tabs.
indexnumber0

.sync

The index of the current image within the datasource.

indicatorstring'radio'

The way the indicator is displayed.

ValueDescription
radioAs radio buttons.
numberAs numeric value in the of “current item / total items.
tabAs tabs. In veui-theme-one, only displayed when ui="large loose".
noneNot displayed.
switch-triggerstring'click'

The behavior triggers item switch when radio indicator is displayed.

ValueDescription
clickSwitched on click.
hoverSwitched on hover.
autoplaybooleanfalseWhether to autoplay the carousel.
pause-on-hoverbooleanfalseWhether to pause the cycling on hover when autoplaying.
intervalnumber3000The amount of time to delay between automatically cycling an item.
wrapbooleanfalseWhether the carousel should cycle continuously or have hard stops.

Slots

NameDescription
item

The content of each carousel item. Displays the corresponding image by default.

The slot scope properties are the same as each item inside datasource (including custom properties), with an extra index: number, which denotes the index within the datasource. i.e. The slot-scope is in the form of {src, alt, label, index, ...}.

Events

NameDescription
change

Triggered the current item changed. The callback argument list is (to: number, from: number). to and from denote the new index and the old index respectively.

Icons

NameDescription
prevPrevious item.
nextNext item.