Skip to content

Commit 4a34ade

Browse files
VividLemonVividLemon
authored
Merge pull request #691 from dagnelies/main
fix: Fixed Carousel and added Doc
2 parents cfca943 + 91009d7 commit 4a34ade

File tree

5 files changed

+148
-22
lines changed

5 files changed

+148
-22
lines changed

‎apps/docs/docs/components/Carousel.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,131 @@
11
# Carousel
22

3+
## Basic usage
4+
5+
Note that one of the `b-carousel-slide` must be `active`. Otherwise the carousel will not work.
6+
7+
<ClientOnly>
8+
<b-carousel>
9+
<b-carousel-slide active img-src="https://picsum.photos/1024/480/?image=10" />
10+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=11" />
11+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=12" />
12+
</b-carousel>
13+
</ClientOnly>
14+
15+
```html
16+
<b-carousel>
17+
<b-carousel-slide active img-src="https://picsum.photos/1024/480/?image=10" />
18+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=11" />
19+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=12" />
20+
</b-carousel>
21+
```
22+
23+
## Carousel options
24+
25+
<ClientOnly>
26+
<b-carousel
27+
:interval="2000"
28+
controls
29+
indicators
30+
background="#ababab"
31+
img-width="1024"
32+
img-height="480"
33+
style="text-shadow: 1px 1px 2px #333"
34+
class="carousel-dark carousel-fade"
35+
>
36+
<b-carousel-slide active img-src="https://picsum.photos/1024/480/?image=20" />
37+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=21" />
38+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=22" />
39+
</b-carousel>
40+
</ClientOnly>
41+
42+
```html
43+
<b-carousel
44+
:interval="2000"
45+
controls
46+
indicators
47+
background="#ababab"
48+
img-width="1024"
49+
img-height="480"
50+
style="text-shadow: 1px 1px 2px #333"
51+
class="carousel-dark carousel-fade"
52+
>
53+
<b-carousel-slide active img-src="https://picsum.photos/1024/480/?image=20" />
54+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=21" />
55+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=22" />
56+
</b-carousel>
57+
```
58+
59+
## Slide options
60+
61+
<ClientOnly>
62+
<b-carousel controls indicators>
63+
<b-carousel-slide active img-src="https://picsum.photos/1024/480/?image=30">
64+
<h1>First slide</h1>
65+
<p>Some more detailed description or whatever content.</p>
66+
</b-carousel-slide>
67+
<b-carousel-slide
68+
caption="Second slide"
69+
text="Does the same, just a bit differently."
70+
img-src="https://picsum.photos/1024/480/?image=31"
71+
/>
72+
<b-carousel-slide>
73+
<template #img>
74+
<img
75+
width="1024"
76+
height="480"
77+
src="https://picsum.photos/1024/480/?image=32"
78+
alt="image slot"
79+
/>
80+
</template>
81+
<h1>Third slide</h1>
82+
<p>Constains a customized background image</p>
83+
</b-carousel-slide>
84+
<b-carousel-slide img-height="480px" img-blank img-blank-color="pink" img-alt="Blank image">
85+
<h1>Fourth slide</h1>
86+
<p>No background image</p>
87+
</b-carousel-slide>
88+
</b-carousel>
89+
</ClientOnly>
90+
91+
```html
92+
<b-carousel
93+
controls
94+
indicators>
95+
96+
<b-carousel-slide active img-src="https://picsum.photos/1024/480/?image=30">
97+
<h1>First slide</h1>
98+
<p>Some more detailed description or whatever content.</p>
99+
</b-carousel-slide>
100+
101+
<b-carousel-slide
102+
caption="Second slide"
103+
text="Does the same, just a bit differently."
104+
img-src="https://picsum.photos/1024/480/?image=31"
105+
/>
106+
107+
<b-carousel-slide>
108+
<template #img>
109+
<img
110+
width="1024"
111+
height="480"
112+
src="https://picsum.photos/1024/480/?image=32"
113+
alt="image slot"
114+
/>
115+
</template>
116+
<h1>Third slide</h1>
117+
<p>Constains a customized background image</p>
118+
</b-carousel-slide>
119+
120+
<b-carousel-slide img-height="480px" img-blank img-blank-color="pink" img-alt="Blank image">
121+
<h1>Fourth slide</h1>
122+
<p>No background image</p>
123+
</b-carousel-slide>
124+
</b-carousel>
125+
```
126+
127+
## Reference
128+
3129
<ClientOnly>
4130
<ComponentReference></ComponentReference>
5131
</ClientOnly>

‎packages/bootstrap-vue-3/src/components/BCarousel/BCarousel.vue

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<template>
22
<div :id="computedId" ref="element" class="carousel slide" data-bs-ride="carousel">
3-
<div v-if="indicatorsBoolean" class="carousel-indicators">
4-
<button
5-
v-for="(_, i) of slides"
6-
:key="i"
7-
type="button"
8-
:data-bs-target="`#${computedId}`"
9-
:data-bs-slide-to="i"
10-
:class="i === 0 ? 'active' : ''"
11-
aria-current="true"
12-
:aria-label="`${indicatorsButtonLabel} ${i}`"
13-
/>
14-
</div>
3+
<template v-if="indicatorsBoolean">
4+
<div class="carousel-indicators">
5+
<button
6+
v-for="(_, i) of slides"
7+
:key="i"
8+
type="button"
9+
:data-bs-target="`#${computedId}`"
10+
:data-bs-slide-to="i"
11+
:class="i === startingSlide ? 'active' : ''"
12+
aria-current="true"
13+
:aria-label="`${indicatorsButtonLabel} ${i}`"
14+
/>
15+
</div>
16+
</template>
1517

1618
<div class="carousel-inner">
1719
<slot />
@@ -49,6 +51,7 @@ import {useBooleanish, useEventListener, useId} from '../../composables'
4951
import type {Booleanish} from '../../types'
5052
5153
interface BCarouselProps {
54+
startingSlide?: number
5255
id?: string
5356
imgHeight?: string
5457
imgWidth?: string
@@ -65,6 +68,7 @@ interface BCarouselProps {
6568
}
6669
6770
const props = withDefaults(defineProps<BCarouselProps>(), {
71+
startingSlide: 0,
6872
modelValue: 0,
6973
controls: false,
7074
indicators: false,
@@ -94,7 +98,7 @@ const slots = useSlots()
9498
9599
const element = ref<HTMLElement>()
96100
const instance = ref<Carousel>()
97-
const computedId = useId(toRef(props, 'id'), 'accordion')
101+
const computedId = useId(toRef(props, 'id'), 'carousel')
98102
const slides = ref<VNode[]>([])
99103
100104
useEventListener(element, 'slide.bs.carousel', (payload) => emit('sliding-start', payload))
@@ -108,7 +112,7 @@ onMounted(() => {
108112
})
109113
110114
if (slots.default) {
111-
slides.value = slots.default().filter((child: any) => child.type?.name === 'BCarouselSlide')
115+
slides.value = slots.default().filter((child: any) => child.type?.__name === 'BCarouselSlide')
112116
}
113117
})
114118

‎packages/bootstrap-vue-3/src/components/BCarousel/BCarouselSlide.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
22
<div
3-
:id="computedId"
43
class="carousel-item"
54
:class="{active: activeBoolean}"
65
:data-bs-interval="interval"
@@ -77,11 +76,13 @@ const props = withDefaults(defineProps<BCarouselSlideProps>(), {
7776
textTag: 'p',
7877
})
7978
79+
// instead of using this property, it would be nice to use `startingSlide`
80+
// of the parent Carousel in order to set the proper active slide
8081
const activeBoolean = useBooleanish(toRef(props, 'active'))
8182
const imgBlankBoolean = useBooleanish(toRef(props, 'imgBlank'))
8283
8384
const parentData = inject<BCarouselParentData>(injectionKey, {})
84-
const computedId = useId(toRef(props, 'id'), 'accordion')
85+
8586
// eslint-disable-next-line @typescript-eslint/no-unused-vars
8687
const img = computed<string | true | undefined>(() =>
8788
imgBlankBoolean.value ? imgBlankBoolean.value : props.imgSrc

‎packages/bootstrap-vue-3/src/components/BCarousel/carousel-slide.spec.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,6 @@ describe('carousel-slide', () => {
2020
expect(wrapper.classes()).toContain('carousel-item')
2121
})
2222

23-
it('has attr id as always defined', () => {
24-
const wrapper = mount(BCarouselSlide)
25-
expect(wrapper.attributes('id')).toBeDefined()
26-
})
27-
2823
it('has class active when prop active', async () => {
2924
const wrapper = mount(BCarouselSlide, {
3025
props: {active: true},

‎packages/bootstrap-vue-3/src/components/BCarousel/carousel.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('carousel', () => {
3535
it('has attr id when prop id', () => {
3636
const wrapper = mount(BCarousel)
3737
expect(wrapper.attributes('id')).toBeDefined()
38-
expect(wrapper.attributes('id')).toContain('accordion')
38+
expect(wrapper.attributes('id')).toContain('carousel')
3939
})
4040

4141
it('has div with class carousel-inner', () => {

0 commit comments

Comments
 (0)