Does the Carousel component work?
See original GitHub issueI am trying to use the BCarousel component but I can’t get it to work and it doesn’t appear to have an example in the docs: https://github.com/cdmoro/bootstrap-vue-3/tree/main/docs/components
There are no errors being displayed, all of the HTML appears to be there, but nothing is visible from the slides. This is all that you see:
![Screen Shot 2021-12-02 at 1 52 15 PM](https://user-images.githubusercontent.com/1720267/144509036-7700ae20-9ea8-4443-8f35-307f7d1aec0d.png)
Using this code from the Bootstrap-Vue documentation: https://bootstrap-vue.org/docs/components/carousel
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=55"
alt="image slot"
>
</template>
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
slide: 0,
sliding: null
}
},
methods: {
onSlideStart(slide) {
this.sliding = true
},
onSlideEnd(slide) {
this.sliding = false
}
}
}
</script>
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Carousel - Bootstrap
A slideshow component for cycling through elements—images or slides of text—like a carousel. How it works. The carousel is a slideshow for cycling...
Read more >Carousel Component - Simon Fraser University
The Carousel component allows you to a display a selection of rotating images with a title, brief description and link to an associated...
Read more >Carousel | Components - Developer - Semrush
Carousel is a component for displaying a group of content in a limited area of the interface. Most often used for image galleries...
Read more >Best practices for carousels - web.dev
A carousel is a UX component that displays content in slideshow-like manner. Carousels can "autoplay" or be navigated manually by users.
Read more >Getting Started with the React Carousel Component - YouTube
Learn how easily you can create and configure the Syncfusion React Carousel using the create-react-app command. This video also explains how ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It would be nice to try to transition away from using Bootstrap js code and using only Vue internally. The carousel js code is relatively simple, which is nice. Most of it is handling some event listeners, and controlling how the images change. Both of which are extremely simple, thanks to Vue. But it’s not very important to get to.
@gvaliani Actually, the indicators should work …as long as the active slide is the first one.
If another slide is the starting one, there is an undocumented property to add:
<b-carousel indicators starting-slide="2" ...
where the first slide starts with index 0. It’s a bit ugly but I didn’t know how to make it right.Note to next developer/fixer: IMHO the
active
boolean property on the slide should disappear, in favor of only using thestarting-slide
to determine which slide is “active” at start. This would also solve the “bug” that the carousel does not render if none of the slides is marked as active.