MazCarousel

MazCarousel is a standalone component to display and manage items in a row

Basic usage

Carousel title

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

<script lang="ts" setup>
import MazCarousel from 'maz-ui/components/MazCarousel'
import MazCard from 'maz-ui/components/MazCard'
</script>

<template>
  <MazCarousel title="Carousel title">
    <MazCard
      v-for="(item, i) in Array(8)"
      :key="i"
      :gallery="{
        images: [
          'https://placedog.net/250/300?random',
        ],
      }"
      style="min-width: 250px;"
    >
      <template #title>
        <h4 class="maz-m-0">
          Doggo
        </h4>
      </template>
      <template #content-body>
        <p class="maz-text-muted" style="margin-bottom: 0;">
          It's a beautifull doggo, no ?
        </p>
      </template>
    </MazCard>
  </MazCarousel>
</template>

Options

hide-scrollbar

This options will display the component without scrollbar only when the component is not hovered, focused or active

Carousel

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

<script lang="ts" setup>
import MazCarousel from 'maz-ui/components/MazCarousel'
import MazCard from 'maz-ui/components/MazCard'
</script>

<template>
  <MazCarousel hide-scrollbar>
    <template #title>
      <h4 class="maz-text-2xl maz-font-bold">Carousel</h4>
    </template>
    <MazCard
      v-for="(item, i) in Array(8)"
      :key="i"
      :gallery="{
        images: [
          'https://placedog.net/400/200?random'
        ]
      }"
      style="min-width: 250px;"
    >
      <template #content-title>
        <h4 class="maz-m-0">
          Doggo
        </h4>
      </template>
      <template #content-body>
        <p class="maz-text-muted" style="margin-bottom: 0;">
          It's a beautifull doggo, no ?
        </p>
      </template>
    </MazCard>
  </MazCarousel>
</template>

hide-scroll-buttons

This options will display the component without scroll buttons

Carousel without scroll buttons

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

Doggo

It's a beautifull doggo, no ?

<script lang="ts" setup>
import MazCarousel from 'maz-ui/components/MazCarousel'
import MazCard from 'maz-ui/components/MazCard'
</script>

<template>
  <MazCarousel hide-scroll-buttons title="Carousel without scroll buttons">
    <MazCard
      v-for="(item, i) in Array(8)"
      :key="i"
      :gallery="{
        images: [
          'https://placedog.net/300/200'
        ]
      }"
      style="min-width: 250px;"
    >
      <template #content-title>
        <h4 class="maz-m-0">
          Doggo
        </h4>
      </template>
      <template #content-body>
        <p class="maz-text-muted" style="margin-bottom: 0;">
          It's a beautifull doggo, no ?
        </p>
      </template>
    </MazCard>
  </MazCarousel>
</template>

Props

Name	Description	Type	Required	Default
hide-scroll-buttons	Hide display the scroll buttons	boolean	No	false
translations	Translations of the carousel	DeepPartial<MazUiTranslationsNestedSchema['carousel']>	No	Translations from @maz-ui/translations
hide-scrollbar	Hide the scrollbar when not active	boolean	No	false
title	The title of the carousel	string	No	undefined

Slots

Name	Description	Bindings
title
previous-icon
next-icon
default