Appearance

Carousel ​

Renders slides with objects containing an imageUrl property. It uses the library vue3-carousel.

Mini image tiles are rendered under the carousel to allow for direct navigation to a specific slide.

Basic Usage ​

Item 1 of 4
js
const slides = ref([
    {
        id: 1,
        imageUrl: 'https://picsum.photos/1000/600.webp?random=1',
    },
    {
        id: 2,
        imageUrl: 'https://picsum.photos/1000/600.webp?random=2',
    },
    ...
]);
template
  <Carousel :slides="slides" />

Autoplay Transitions ​

The autoplay-interval prop in the Carousel component enables automatic transitions for slides at the specified interval, in milliseconds. If not specified, slides must be transitioned manually. When the pauseAutoplayOnHover value is specified, transitions will pause on hover.

Item 1 of 4
template
<Carousel :autoplay-interval="2000" :pause-autoplay-on-hover="true" :slides="slides" loop />

The loop prop in the Carousel component enables a continuous carousel experience. When the last slide is reached, it loops back to the first slide.

Item 1 of 4
template
<Carousel :slides="slides" loop />

Pagination Dots ​

The pagination="dot" prop in the Carousel component replaces mini image tiles with simple dots. To display the dots on large screens, staticPaginationDots must be set to true.

These dots cannot be clicked and serve as a visual indicator of the current slide.

Item 1 of 4
template
<Carousel :slides="slides" pagination="dot" static-pagination-dots />

Round Borders ​

The round-borders prop applies a rounded border style to the carousel slides.

Item 1 of 4
template
<Carousel :slides="slides" round-borders />

You can control the Carousel navigation externally using the prev and next methods.

In this example, the left button navigates to the previous slide, the right button to the next. The Carousel component is controlled via ref="carouselRef".

Item 1 of 4

The CarouselInstanceRef type is a helper type safe for the template ref on a stash Carousel instance that wraps vue3-carousel library. This type is defined in the Carousel.types file and is a global declaration of the stash Carousel

According to Vue docs this is how you extract component instance type:

ts
const modal = ref<InstanceType<typeof MyComponent> | null>(null);

But stash Carousel is a generic VueComponent, and this approach cause Typescript errors and missing properties issues

js
import { CarouselInstanceRef } from '@leaflink/stash/Carousel.types';

const carouselRef = ref<CarouselInstanceRef>();

const next = () => {
    carouselRef.value?.next();
};

const prev = () => {
    carouselRef.value?.prev();
};
template
<div class="tw-mb-2">
    <Button icon @click="prev">
        <Icon name="chevron-left" />
    </Button>
    <Button icon @click="next">
        <Icon name="chevron-right" />
    </Button>
</div>
<Carousel :slides="slides" ref="carouselRef" />

Pagination Tile Radius ​

The paginationTileRadius prop controls the border-radius of the pagination tiles. This prop takes either standard (default) or full as its value.

When set to standard, it applies a moderate border-radius, when set to full, it applies a maximum border-radius, making the tiles fully rounded.

Item 1 of 4
template
  <Carousel :slides="slides" pagination-tile-radius="full" />

Custom Content ​

The Carousel component supports custom content within each slide. Using the slot with the name slide, you can customize the content of each slide by providing a template for the slides slot.

In the template, you have access to the slide and index properties. The slide property represents the current slide object, and the index property represents the index of the current slide.

  1. Slide Identifier 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in diam non enim convallis aliquet quis in tellus. Suspendisse efficitur, quam elementum imperdiet fermentum.

Item 1 of 4
template
  <Carousel :slides="slides" pagination-tile-rounded-full pagination-tile-opacity-full>
    <template #slide="{ slide, index }">
        <div class="tw-columns-2">
            <img class="tw-w-full tw-aspect-square tw-object-cover" :src="slide.imageUrl" />
            <div class="tw-w-full tw-text-left">
              <h3>Slide Identifier {{ slide.id }}</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Donec in diam non enim convallis aliquet quis in tellus.
                Suspendisse efficitur, quam elementum imperdiet fermentum.
              </p>
            </div>
        </div>
    </template>
  </Carousel>

Hide Pagination ​

The hidePagination prop controls if the pagination dots/tiles are visible.

Item 1 of 4
template
  <Carousel :slides="slides" hide-pagination />

Hide Navigation ​

The hideNavigation prop controls if the navigation buttons are visible.

INFO

It should be taken into consideration that the navigation buttons also appear only if the number of slides is greater than 1.

Item 1 of 4
template
  <Carousel :slides="slides" hide-navigation />

Show Multiple Slides Per Page ​

The itemsToScroll and itemsToShow props are used to define how many slides should be shown, per page, within the Carousel. By default, these values are 1.

INFO

Generally itemsToScroll and itemsToShow will have the same value.

Item 1 of 4
template
  <Carousel :slides="slides" loop pagination="dot" snap-align="start" :items-to-scroll="2" :items-to-show="2" />