Usage

Default

No props configured, default slides per page is 3.

<script setup lang="ts">
import CLCarousel from '@codeandfunction/callaloo/CLCarousel';
import CLText from '@codeandfunction/callaloo/CLText';
</script>

<template>
  <CLCarousel>
    <CLCarousel.Slide v-for="n in 20">
      <div style="height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 0.15rem; overflow: hidden; background-color: #EFEFEF; border-radius: 0.25rem;">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>

Pagination

Dots

Set the paginationType prop to CLPaginationType.Dots.

<script setup lang="ts">
import CLCarousel from '@codeandfunction/callaloo/CLCarousel';
import CLText from '@codeandfunction/callaloo/CLText';
import { CLPaginationType, CLColorVariants } from '@codeandfunction/callaloo';
</script>

<template>
  <CLCarousel :pagination-type="CLPaginationType.Dots" :variant="CLColorVariants.Solid">
    <CLCarousel.Slide v-for="n in 20">
      <div style="height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 0.15rem; overflow: hidden; background-color: #EFEFEF; border-radius: 0.25rem;">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>

Inline

Set the paginationType prop to CLPaginationType.Inline.

<script setup lang="ts">
import CLCarousel from '@codeandfunction/callaloo/CLCarousel';
import CLText from '@codeandfunction/callaloo/CLText';
import { CLPaginationType, CLColorVariants } from '@codeandfunction/callaloo';
</script>

<template>
  <CLCarousel :pagination-type="CLPaginationType.Inline" :variant="CLColorVariants.Solid">
    <CLCarousel.Slide v-for="n in 20">
      <div style="height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 0.15rem; overflow: hidden; background-color: #EFEFEF; border-radius: 0.25rem;">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>

Position

Use the controlPosition and controlAlign props to adjust the appearance of the pagination elements.

<script setup lang="ts">
import CLCarousel from '@codeandfunction/callaloo/CLCarousel';
import CLText from '@codeandfunction/callaloo/CLText';
import { CLAlign, CLOrder, CLPaginationType, CLColorVariants } from '@codeandfunction/callaloo';
</script>

<template>
  <CLCarousel :control-align="CLAlign.Center" :control-position="CLOrder.After" :pagination-type="CLPaginationType.Dots" :variant="CLColorVariants.Solid">
    <CLCarousel.Slide v-for="n in 20">
      <div style="height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 0.15rem; overflow: hidden; background-color: #EFEFEF; border-radius: 0.25rem;">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>

Single

Use the perPage prop to set the default slides to show per page.

<script setup lang="ts">
import CLCarousel from '@codeandfunction/callaloo/CLCarousel';

const onShowMoreHandler = () => {};
</script>

<template>
  <CLCarousel more-label="See all" :on-show-more="onShowMoreHandler" title="My photos" :per-page="1">
    <CLCarousel.Slide v-for="n in 20">
      <div style="height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 0.15rem; overflow: hidden; background-color: #EFEFEF; border-radius: 0.25rem;">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>

Custom title

Use the #title slot to use a custom title.

<script setup lang="ts">
import CLCarousel from '@codeandfunction/callaloo/CLCarousel';
import CLHeading from '@codeandfunction/callaloo/CLHeading';
import CLIcon from '@codeandfunction/callaloo/CLIcon';
import CLText from '@codeandfunction/callaloo/CLText';
import { CLHeadingTypes, CLIconNames, CLSizes, CLTextTypes } from '@codeandfunction/callaloo';

const onShowMoreHandler = () => {};
</script>

<template>
  <CLCarousel more-label="See all" :on-show-more="onShowMoreHandler" :per-page="1">
   <template #title>
      <div style="display: flex; align-items: center;">
        <div style="margin-right: 1rem;">
          <CLIcon :name='CLIconNames.Image' :size='CLSizes.Large' />
        </div>
        <div>
          <CLHeading :type='CLHeadingTypes.Section'>My photos</CLHeading>
          <CLText :type='CLTextTypes.Summary'>Random shots from this summer</CLText>
        </div>
      </div>
    </template>
    <CLCarousel.Slide v-for="n in 20">
      <div style="height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin: 0 0.15rem; overflow: hidden; background-color: #EFEFEF; border-radius: 0.25rem;">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>

Props