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

Merge pull request #77 from cadiyak/carousel

Browse Source 
Add basic carousel component (Issue #55)
This commit is contained in:
Ilya Artamonov
2022-12-13 13:45:35 +03:00
committed by GitHub
parent 11fe2dd903 568641fb43
commit 5c51b082ff
9 changed files with 314 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
docs/components/carousel/carousel.md
View File

@@ -1,8 +1,17 @@
<script setup>
import CarouselExample from './examples/CarouselExample.vue'
import CarouselDefaultExample from './examples/CarouselDefaultExample.vue';
import CarouselNoControlsExample from './examples/CarouselNoControlsExample.vue';
import CarouselNoIndicatorsExample from './examples/CarouselNoIndicatorsExample.vue';
import CarouselSlideExample from './examples/CarouselSlideExample.vue';
import CarouselSlideIntervalExample from './examples/CarouselSlideIntervalExample.vue';
import CarouselPicturesExample from './examples/CarouselPicturesExample.vue';
</script>
# Vue Carousel Component - Flowbite
Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
## Default slider
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
@@ -12,4 +21,149 @@ import { Carousel } from 'flowbite-vue'
</template>
```
<CarouselExample />
<CarouselDefaultExample />
## Prop - controls
```typescript
const props = defineProps({
controls: {
type: Boolean,
default: true,
},
})
```
<CarouselNoControlsExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :controls="false"></Carousel>
</template>
```
## Prop - indicators
```typescript
const props = defineProps({
indicators: {
type: Boolean,
default: true,
},
})
```
<CarouselNoIndicatorsExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :indicators="false"></Carousel>
</template>
```
## Prop - slide
```typescript
const props = defineProps({
slide: {
type: Boolean,
default: false,
},
})
```
<CarouselSlideExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :slide="true"></Carousel>
</template>
```
## Prop - slide interval
```typescript
const props = defineProps({
slideInterval: {
type: Number,
default: 3000,
},
})
```
<CarouselSlideIntervalExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
</script>
<template>
<Carousel :slide="true" :slide-interval="1000"></Carousel>
</template>
```
## Prop - pictures
```typescript
const props = defineProps({
pictures: {
type: Array,
default() {
return [
{
'src': 'https://flowbite.com/docs/images/carousel/carousel-1.svg',
'alt': 'Picture 1',
},
{
'src': 'https://flowbite.com/docs/images/carousel/carousel-2.svg',
'alt': 'Picture 2',
},
{
'src': 'https://flowbite.com/docs/images/carousel/carousel-3.svg',
'alt': 'Picture 3',
},
]
},
},
})
```
<CarouselPicturesExample />
```vue
<script setup>
import { Carousel } from 'flowbite-vue'
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>
<template>
<Carousel :pictures="pictures"></Carousel>
</template>
```

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>