MazCarousel
MazCarousel is a standalone component to display and manage items in a row
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
Carousel
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
Steven Seagal
You're awesome! You're awesome!
vue
<template>
<MazCarousel>
<template #title>
<h4 class="maz-m-0">Carousel</h4>
</template>
<MazCard
v-for="(item, i) in Array(8)"
:key="i"
:images="[
'https://loremflickr.com/250/300'
]"
style="min-width: 250px;"
>
<template #title>
<h4 class="maz-m-0">
Steven Seagal
</h4>
</template>
<template #content>
<p class="maz-text-muted" style="margin-bottom: 0;">
You're awesome! You're awesome!
</p>
</template>
</MazCard>
</MazCarousel>
</template>
<script lang="ts" setup>
import MazCarousel from 'maz-ui/components/MazCarousel'
</script>Options
hide-scrollbar
This options will display the component without scrollbar only when the component is not hovered, focused or active
no-scroll-btn
This options will display the component without scroll buttons
Props & Slots
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| noScrollBtn | Do not display the scroll buttons | boolean | - | |
| ariaLabelPreviousButton | Aria label for the previous button | string | - | 'Scroll to previous items' |
| ariaLabelNextButton | Aria label for the next button | string | - | 'Scroll to next items' |
| hideScrollbar | Hide the scrollbar when not active | boolean | - |
Slots
| Name | Description | Bindings |
|---|---|---|
| title | ||
| previous-icon | ||
| next-icon | ||
| default |