---
title: "MazCarousel"
description: "MazCarousel is a standalone component to display and manage items in a row"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-carousel"
---

# MazCarousel

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

- Package: `maz-ui`
- Import: `import MazCarousel from 'maz-ui/components/MazCarousel'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-carousel

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

**Tip:**

This component can be translated globally using the [MazUi](../ecosystem/translations.md) plugin.

## Basic usage

```vue
<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="m-0">
          Doggo
        </h4>
      </template>
      <template #content-body>
        <p class="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

```vue
<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="text-2xl 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="m-0">
          Doggo
        </h4>
      </template>
      <template #content-body>
        <p class="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

```vue
<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="m-0">
          Doggo
        </h4>
      </template>
      <template #content-body>
        <p class="text-muted" style="margin-bottom: 0;">
          It's a beautifull doggo, no ?
        </p>
      </template>
    </MazCard>
  </MazCarousel>
</template>
```

## MazCarousel API

`import MazCarousel from 'maz-ui/components/MazCarousel'`

### Props

- `hide-scroll-buttons` (`boolean`, default: `false`): Hide display the scroll buttons.
- `translations` (`{ ariaLabel?: { previousButton?: string | undefined; nextButton?: string | undefined; } | undefined; }`, default: `Translations from`): Translations of the carousel.
- `hide-scrollbar` (`boolean`, default: `false`): Hide the scrollbar when not active.
- `title` (`string`): The title of the carousel.

### Slots

- `#title`
- `#previous-icon`
- `#next-icon`
- `#default`