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>
svelte
Click fold/expand code

Themes


<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
Click fold/expand code

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>
svelte
Click fold/expand code

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>
svelte
Click fold/expand code

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>
svelte
Click fold/expand code

Indicator positions

indicatorsPositionHorizontal
indicatorsPositionVertical
indicatorsAlignDirection

<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
Click fold/expand code

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>
svelte
Click fold/expand code

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>
svelte
Click fold/expand code

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
Last update at: 2024/07/08 10:39:42