You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.1 KiB
39 lines
1.1 KiB
<template> |
|
<section |
|
class="w-50 vh-30 m-auto d-flex align-items-center justify-content-center" |
|
> |
|
<ClientOnly fallbackTag="div"> |
|
<MDBCarousel v-model="carousel" :items="items1" fade /> |
|
<template #fallback> |
|
<MDBSpinner /> |
|
</template> |
|
</ClientOnly> |
|
</section> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { MDBCarousel, MDBSpinner } from "mdb-vue-ui-kit"; |
|
|
|
const items1 = [ |
|
{ |
|
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp", |
|
alt: "...", |
|
label: "First slide label", |
|
caption: "Nulla vitae elit libero, a pharetra augue mollis interdum.", |
|
}, |
|
{ |
|
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp", |
|
alt: "...", |
|
label: "Second slide label", |
|
caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", |
|
}, |
|
{ |
|
src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp", |
|
alt: "...", |
|
label: "Third slide label", |
|
caption: "Praesent commodo cursus magna, vel scelerisque nisl consectetur.", |
|
}, |
|
]; |
|
|
|
const carousel = useState("carousel", () => 0); |
|
</script> |