jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: start to implement carousel.

Browse Source
This commit is contained in:
cadiyak
2022-08-27 15:41:36 +02:00
parent fd177ef3e6
commit 0ebf7d9a03
8 changed files with 149 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/components/carousel/examples/CarouselAutomaticSlideExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :slide="true"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselDefaultExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselNoControlsExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :controls="false"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselNoIndicatorsExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :indicators="false"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

30
docs/components/carousel/examples/CarouselPicturesExample.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :pictures="pictures"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
const pictures = [
{
'src': 'https://i.picsum.photos/id/221/1920/1080.jpg?grayscale&hmac=GWPBzHGEhEh-BrPn1i-PuximCxLtUpKHcNwyACiTRHk',
'alt': 'Picture 1',
},
{
'src': 'https://i.picsum.photos/id/608/1920/1080.jpg?grayscale&hmac=kkVc8-M3ovbO-sFr02WmRbrHx5YcfWmOtkP8rNF9fO4',
'alt': 'Picture 2',
},
{
'src': 'https://i.picsum.photos/id/1012/1920/1080.jpg?grayscale&hmac=Zy9JmZ_sl88DXTF502k_0QqaeCyqjhkn60DjyE5F8Eo',
'alt': 'Picture 3',
},
{
'src': 'https://i.picsum.photos/id/1004/1920/1080.jpg?grayscale&hmac=48C-T9K-36l8jpzJntPTu40OiDuXflIlG_YB-lQWYZI',
'alt': 'Picture 4',
},
{
'src': 'https://i.picsum.photos/id/244/1920/1080.jpg?grayscale&hmac=lLcfHciI-EqaOIHGB_Gab7OpUjVSmDLw6GOq6B5THak',
'alt': 'Picture 5',
},
]
</script>

8
docs/components/carousel/examples/CarouselSlideExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :slide="true"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>

8
docs/components/carousel/examples/CarouselSlideIntervalExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="vp-raw flex flex-col">
<Carousel :slide="true" :slide-interval="1000"></Carousel>
</div>
</template>
<script setup>
import { Carousel } from '../../../../src/index'
</script>