Slider Autoplay
The VSliderAutoplay component extends the VSlider functionality by automatically transitioning between slides with autoplay support and customizable pagination.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
dataInterface | Object | undefined | The data structure interface for the slider. |
data | Array | [] | Array of slide items to be displayed. |
autoplay | Boolean | true | Enables autoplay functionality. |
activecolor | String | #F1AF32 | Sets the active pagination item color. |
showPagination | Boolean | true | Shows pagination dots for slide navigation. |
autoplayChangeTime | Number | 6000 | Duration (in ms) for autoplay slide transition. |
Slots
| Slot Name | Description |
|---|---|
| default | Slot for content in the slider. |
Usage
vue
<script setup lang="ts">
import VSliderAutoplay from 'UiKit/components/VSlider/VSliderAutoplay.vue';
const sliderItems = [
{ id: 1, testimonials: [{ text: "Great service!", author: "Alice" }] },
{ id: 2, testimonials: [{ text: "Loved it!", author: "Bob" }] },
{ id: 3, testimonials: [{ text: "Amazing experience.", author: "Charlie" }] },
];
</script>
<VSliderAutoplay
v-slot="active"
:data="sliderItems"
autoplay
>
<div class="is--card">
<div
v-for="(item, itemIndex) in active.testimonials"
:key="itemIndex"
>
<div
:key="active.id"
>
<p
:key="active.id"
>
{{ item.text }}
</p>
<div
:key="active.id"
class="is--h5__title"
>
{{ item.author }}
</div>
</div>
</div>
</div>
</VSliderAutoplay>