t-carousel

This is a carousel component that uses native modern Javascript and CSS features with many helpful methods. It's touch and mouse friendly and uses the system's native scroll functionality.

In addition to other options, it comes with support for controls, dots, and auto play. You can also use the use-carousel composable to create your own component to customize the UI/UX as you wish.

Learn more about use-carousel.

Basic usage

To create a simple carousel, wrap your slides with the t-carousel component. You can build your HTML markup how you want. You just need to set the width of each slide using the flex CSS property.

I'm a slide!

<TCarousel>
  <TCell class="flex-[0_0_25%]">
    <TCard>I'm a slide!</TCard>
  </TCell>
</TCarousel>

Align, Stop and Initial Value

Set the alignment position for current slide when it is active. You can also set the initial slide when the component mounts.

I'm a slide!

<TCarousel align="center" initial="1" nmx="xs" stop>
  <TCell class="flex-[0_0_75%]">
    <TCard design="raised" mx="xs" p="xl">
      I'm a slide!
    </TCard>
  </TCell>
</TCarousel>

Controls, Lazy Images and Wrap

Set the controls option to show next and previous buttons. When wrap is enabled, these buttons are always active so users can navigate freely. And since this is a native scroll, the t-image component only loads images when they are in the viewport.

<TCarousel
  content-class="h-100"
  controls="corner"
  design="raised"
  color="surface"
  size="re"
  icon-dimensions="24"
  wrap //
>
  <TImage class="flex-[0_0_100%]" src="https://source.unsplash.com/1350x800/?newyork" />
</TCarousel>

Dots

Set the dots option to show slides buttons.

<TCard design="raised">
  <TCarousel content-class="h-100" dots="floating" textColor="alert">
    <TCell class="h-full flex-[0_0_100%]">
      <TCell class="h-full" p="xl" fill>
        <TCard class="overflow-hidden" design="flat" color="surface" fill>
          <TImage src="https://source.unsplash.com/1350x800/?tokyo" stretch />
        </TCard>
      </TCell>
    </TCell>
  </TCarousel>
</TCard>

Vertical

Set the direction property to vertical to show a vertical carousel. In this mode, you need to set a specific height to the carousel inner element. This can be done by using the content-class property. For the slides, you can set the height in percentage.

<TCarousel
  content-class="h-140"
  direction="vertical"
  align="center"
  controls="sides"
  dots="floating"
  design="outlined"
  color="surface"
  textColor="surface"
  initial="1"
>
  <TImage class="w-full h-8/12" src="https://source.unsplash.com/1350x800/?dubai" />
</TCarousel>

Auto Play

I'm a slide!

There are a few properties that you can customize to enable auto play. First, enable auto play using the auto-play property. Next, you can specify the number of loops using the auto-play-loops property. Finally, you can set the duration between changes using the auto-play-duration property.

To guarantee the best performance and user experience, auto play is only active when the component is in the viewport and the user is not interacting with it.

<TCarousel
  class="text-center"
  align="center"
  auto-play-loops="2"
  auto-play-duration="2000"
  auto-play //
>
  <TCell class="flex-[0_0_75%]">
    <TCard design="flat" color="surface" size="sm" p="xl" ms>
      I'm a slide!
    </TCard>
  </TCell>
</TCarousel>

To manually control the component state or to create a custom component, you can the use-carousel composable. It provides the same API that is used to create the t-carousel component.

Slide: 0 of -1

Not Focused

Not Transitioning

Not Intersected

I'm a slide!

export default defineComponent({
  setup() {
    // Use it to manually control the state of TCarousel or to create a custom component.
    const {
      currentSlide,
      canPrevious,
      canNext,
      slidesCount,
      isFocused,
      isTransitioning,
      isIntersected,
      next,
      previous,
      select,
    } = useCarousel();

    return () => (
      <>
        <TText>
          Slide: {currentSlide.value} of {slidesCount.value - 1}
        </TText>

        <TButton disabled={!canPrevious.value} onClick={previous}>
          Previous
        </TButton>
        <TButton disabled={!canNext.value} onClick={next}>
          Next
        </TButton>
        <TButton disabled={currentSlide.value === 3} onClick={() => select(3)}>
          Select 3
        </TButton>

        <TBadge value={isFocused.value ? "Focused" : "Not Focused"} inline />
        <TBadge value={isTransitioning.value ? "Transitioning" : "Not Transitioning"} inline />
        <TBadge value={isIntersected.value ? "Intersected" : "Not Intersected"} inline />

        <TCarousel>
          <TCell class="flex-[0_0_100%]">
            <TCard>I'm a slide!</TCard>
          </TCell>
        </TCarousel>
      </>
    );
  },
});

API

No options available

Components

t-card

Components

t-catalog

Basic usage
Align, Stop and Initial Value
Controls, Lazy Images and Wrap
Dots
Vertical
Auto Play
Controller and Custom Navigation
API

Table of Contents