Carousel

Basic usage

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-red-apple icon" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-banana icon" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-grapes icon" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-red-apple icon" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-banana icon" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-grapes icon" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Themes

primary

secondary

warning

negative

<script lang="ts">
  let activeIndex = 0
  let theme: 'primary' | 'secondary' | 'warning' | 'negative' = 'primary'
  const themeOptions = [
    {
      label: 'primary',
      value: 'primary',
    },
    {
      label: 'secondary',
      value: 'secondary',
    },
    {
      label: 'warning',
      value: 'warning',
    },
    {
      label: 'negative',
      value: 'negative',
    },
  ]
</script>

<CRadioGroup bind:value={theme} options={themeOptions} />

<hr />

<CCarousel bind:activeIndex {theme}>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-red-apple icon" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-banana icon" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-grapes icon" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
  let theme: 'primary' | 'secondary' | 'warning' | 'negative' = 'primary'
  const themeOptions = [
    {
      label: 'primary',
      value: 'primary',
    },
    {
      label: 'secondary',
      value: 'secondary',
    },
    {
      label: 'warning',
      value: 'warning',
    },
    {
      label: 'negative',
      value: 'negative',
    },
  ]
</script>

<CRadioGroup bind:value={theme} options={themeOptions} />

<hr />

<CCarousel bind:activeIndex {theme}>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-red-apple icon" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-banana icon" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="i-openmoji-grapes icon" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Arrow show timing

arrowTiming prop can hold these values:

'hover' - only show when mouse hover
'never' - never show arrow
'always'- always show arrow

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex arrowTiming="hover">
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex arrowTiming="hover">
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Infinity

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex infinity>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex infinity>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Interval & auto play

Notice that the pauseOnHover prop is default true

So when you hover the carousel. It will pause transition.

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex interval={5000} infinity arrowTiming="hover">
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex interval={5000} infinity arrowTiming="hover">
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Indicator positions

indicatorsPositionHorizontal

start

center

end

indicatorsPositionVertical

start

center

end

indicatorsAlignDirection

row

row-reverse

column

column-reverse

<script lang="ts">
  let activeIndex = 0

  let indicatorsPositionHorizontal: 'start' | 'center' | 'end' = 'center'
  let indicatorsPositionVertical: 'start' | 'center' | 'end' = 'end'
  let indicatorsAlignDirection:
  | 'row'
  | 'row-reverse'
  | 'column'
  | 'column-reverse' = 'row'

  const positionOptions = [
    { label: 'start', value: 'start' },
    { label: 'center', value: 'center' },
    { label: 'end', value: 'end' },
  ]

  const alignOptions = [
    { label: 'row', value: 'row' },
    { label: 'row-reverse', value: 'row-reverse' },
    { label: 'column', value: 'column' },
    { label: 'column-reverse', value: 'column-reverse' },
  ]
</script>

<div>
  <b> indicatorsPositionHorizontal </b>
  <CRadioGroup
    bind:value={indicatorsPositionHorizontal}
    options={positionOptions}
  />
</div>

<div>
  <b> indicatorsPositionVertical </b>
  <CRadioGroup
    bind:value={indicatorsPositionVertical}
    options={positionOptions}
  />
</div>

<div>
  <b> indicatorsAlignDirection </b>
  <CRadioGroup bind:value={indicatorsAlignDirection} options={alignOptions} />
</div>

<hr />

<CCarousel
  bind:activeIndex
  {indicatorsPositionHorizontal}
  {indicatorsPositionVertical}
  {indicatorsAlignDirection}
  infinity
>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0

  let indicatorsPositionHorizontal: 'start' | 'center' | 'end' = 'center'
  let indicatorsPositionVertical: 'start' | 'center' | 'end' = 'end'
  let indicatorsAlignDirection:
  | 'row'
  | 'row-reverse'
  | 'column'
  | 'column-reverse' = 'row'

  const positionOptions = [
    { label: 'start', value: 'start' },
    { label: 'center', value: 'center' },
    { label: 'end', value: 'end' },
  ]

  const alignOptions = [
    { label: 'row', value: 'row' },
    { label: 'row-reverse', value: 'row-reverse' },
    { label: 'column', value: 'column' },
    { label: 'column-reverse', value: 'column-reverse' },
  ]
</script>

<div>
  <b> indicatorsPositionHorizontal </b>
  <CRadioGroup
    bind:value={indicatorsPositionHorizontal}
    options={positionOptions}
  />
</div>

<div>
  <b> indicatorsPositionVertical </b>
  <CRadioGroup
    bind:value={indicatorsPositionVertical}
    options={positionOptions}
  />
</div>

<div>
  <b> indicatorsAlignDirection </b>
  <CRadioGroup bind:value={indicatorsAlignDirection} options={alignOptions} />
</div>

<hr />

<CCarousel
  bind:activeIndex
  {indicatorsPositionHorizontal}
  {indicatorsPositionVertical}
  {indicatorsAlignDirection}
  infinity
>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Custom controls

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex infinity>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
  <CButton slot="control-prev" icon flat theme="secondary">
    <div class="i-mdi-page-previous-outline" />
  </CButton>
  <CButton slot="control-next" icon flat theme="secondary">
    <div class="i-mdi-page-next-outline" />
  </CButton>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex infinity>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
  <CButton slot="control-prev" icon flat theme="secondary">
    <div class="i-mdi-page-previous-outline" />
  </CButton>
  <CButton slot="control-next" icon flat theme="secondary">
    <div class="i-mdi-page-next-outline" />
  </CButton>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

Vertical

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex vertical>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

<script lang="ts">
  let activeIndex = 0
</script>

<CCarousel bind:activeIndex vertical>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-red-apple" />
      Do you want some apples?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-banana" />
      Would you like some bananas?
    </div>
  </CCarouselSlider>
  <CCarouselSlider>
    <div class="item">
      <div class="icon i-openmoji-grapes" />
      How about some grapes?
    </div>
  </CCarouselSlider>
</CCarousel>

<style>
  .item {
    font-size: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .item .icon {
    font-size: 100px;
  }
</style>

svelte

CCarousel Props

height
string
default: 300px

The container height.
theme
'primary' | 'secondary' | 'warning' | 'negative'
default: primary

The theme of indicators and arrow controls.
interval
number
default: 0

The auto play interval. If it set to a value less than 0. The auto play will be disabled.
activeIndex
number
default: 0

The current active slider index (from 0). You can use bind:activeIndex.
indicatorsPositionHorizontal
'start' | 'center' | 'end'
default: center

Determine the indicators horizontal position.
indicatorsPositionVertical
'start' | 'center' | 'end'
default: end

Determine the indicators vertical position.
indicatorsAlignDirection
'row' | 'row-reverse' | 'column' | 'column-reverse'
default: row

Determine the idicators align direction.

This prop use CSS .
vertical
boolean
default: false

Determine whether the transition direction is vertical or not.
infinity
boolean
default: false

Determine whether the sliders can be infinity loop.
arrowTiming
'always' | 'hover' | 'never'
default: always

Determine the arrow controls shown timing.
pauseOnHover
boolean
default: true

Determine to pause the transition when hovering the carousel.

CCarousel Events

No data

CCarousel Slots

indicators

Customize the indicators content.

Bindings:
- names string[]
  
  The names array of this carousel.
control-prev

Customize the to previous slide control content
control-next

Customize the to next slide control content
default

The slides content. It is recommended to use CCarouselSlider

CCarousel Exports

slidesKey
symbol

Records the names of this carousel.
activeIndexKey
symbol

The current index.
directionKey
symbol

The move direction. Can be 'forward' or 'backward'
verticalKey
symbol

The vertical context. Determine whether the carousel moving vertical.
intervalKey
symbol

The auto play interval key.
toNextKey
symbol

To next function key.
timeoutKey
symbol

The timeout flag key.
hoveringKey
symbol

The hovering flag key.
slidingKey
symbol

The sliding flag key.
pausesKey
symbol

The pause functions key.
resumesKey
symbol

The resume functions key.
toIndex
function

Goto specific slider
toPrev
function

Go to previous slide. If current is the first slide and infinity is true. Will goto the last slide.
toNext
function

Go to previous slide. If current is the last and infinity is true. Will goto the first slide.

CCarouselSlider Props

No data

CCarouselSlider Events

No data

CCarouselSlider Slots

default

The content

CCarouselSlider Exports

No data

Suggest changes to this page

Last update at: 2023/08/13 13:04:55

On this page

Basic usage Themes Arrow show timing Infinity Interval & auto play Indicator positions Custom controls Vertical CCarousel Props CCarousel Events CCarousel Slots CCarousel Exports CCarouselSlider Props CCarouselSlider Events CCarouselSlider Slots CCarouselSlider Exports