MazCarousel

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

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

TIP

This component can be translated globally using the MazUi plugin.

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