Georg Spar
1 year ago
14 changed files with 61 additions and 84 deletions
@ -1,39 +0,0 @@ |
|||||||
<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> |
|
Loading…
Reference in new issue