Casual UI - Vue

Basic Usage

Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel v-model="current">
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Infinity

Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    infinity
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Arrow Timing

Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    arrow-timing="hover"
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Themes

primary
secondary
warning
negative
Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
const theme = ref('primary')
const themeOptions = [
  { label: 'primary', value: 'primary' },
  { label: 'secondary', value: 'secondary' },
  { label: 'warning', value: 'warning' },
  { label: 'negative', value: 'negative' },
]
</script>

<template>
  <c-radio-group
    v-model="theme"
    :options="themeOptions"
  />
  <c-carousel
    v-model="current"
    :theme="theme"
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Customize Arrow Control

Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel v-model="current">
    <template #control-prev>
      <c-button
        icon
        flat
        style="font-size:48px;"
      >
        <div i-mdi-page-previous-outline />
      </c-button>
    </template>
    <template #control-next>
      <c-button
        icon
        flat
        style="font-size:48px;"
      >
        <div i-mdi-page-next-outline />
      </c-button>
    </template>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Auto Play

Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    :interval="5000"
    infinity
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Vertical

Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
</script>

<template>
  <c-carousel
    v-model="current"
    vertical
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

Indicator Positions

Indicators position horizontal
start
center
end
Indicators position vertical
start
center
end
Indicators align direction
row
row-reverse
column
column-reverse
Would you like some apples? 
<script setup>
import { ref } from 'vue'

const current = ref(0)
const indicatorsPositionHorizontal = ref('center')
const indicatorsPositionVertical = ref('end')
const indicatorsAlignDirection = ref('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>

<template>
  <div>
    <b>Indicators position horizontal</b>
    <c-radio-group
      v-model="indicatorsPositionHorizontal"
      :options="positionOptions"
    />
  </div>
  <div>
    <b>Indicators position vertical</b>
    <c-radio-group
      v-model="indicatorsPositionVertical"
      :options="positionOptions"
    />
  </div>
  <div>
    <b>Indicators align direction</b>
    <c-radio-group
      v-model="indicatorsAlignDirection"
      :options="alignOptions"
    />
  </div>
  <hr>
  <c-carousel
    v-model="current"
    v-bind="{
      indicatorsPositionHorizontal,
      indicatorsPositionVertical,
      indicatorsAlignDirection,
    }"
  >
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-red-apple
          class="icon"
        />
        Would you like some apples?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          i-openmoji-banana
          class="icon"
        />
        Would you like some bananas?
      </div>
    </c-carousel-slider>
    <c-carousel-slider>
      <div class="item">
        <div
          class="icon"
          i-openmoji-grapes
        />
        Would you like some grapes?
      </div>
    </c-carousel-slider>
  </c-carousel>
</template>

<style scoped>
.item {
  font-size: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item .icon {
  font-size: 100px;
}
</style>
Click to open/fold code
Open Vue Repl Editor

CCarousel API

Props
Slots
Events
modelValue
number
Default  0

The current active index (from 0). Can used with v-model

height
string
Default  '300px'

The height of container.

theme
"primary" | "secondary" | "warning" | "negative"
Default  'primary'

The theme color. It will affect the indicators and controls' color.

interval
number
Default  0

The autoplay interval. If set to a value larger than 0. Autoplay will be set.

indicatorsPositionHorizontal
"start" | "center" | "end"
Default  'center'

The indicators' horizontal position.

indicatorsPositionVertical
"start" | "center" | "end"
Default  'end'

The indicators' vertical position.

indicatorsAlignDirection
"row" | "column" | "row-reverse" | "column-reverse"
Default  'row'

The indicators align direction.

vertical
boolean
Default  false

Determine whether the transition is vertical or not.

infinity
boolean
Default  false

Determine whether the sliders can be toggled infinity or not.

arrowTiming
"always" | "hover" | "never"
Default  'always'

The arrow control shown timing.

pauseOnHover
boolean
Default  true

Determine whether to pause transition count down when the slider is hovering.

CCarouselSlider API

Props
Slots
Events
No Data