carousel-slide | A slide transition for the carousel component | Carousel library

Your JSFiddle is importing https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css in the resources. This is going to import Bootstrap version 5.0.0-beta3.

Which is as issue as BootstrapVue only supports Bootstrap 4.3.1 to 4.5.3 (4.5.3 being the recommended version).

So if you instead import https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css, it should work as intended.

https://jsfiddle.net/23ozwgnp/

You have to use [interval]="3000".

Without the [..] you are not using Angular typed binding but just "regular" string-only binding. Or said differently, interval="3000" is the same as [interval]="'3000'".

You are mixing jQuery libraries in your pen, as well as mixing vanilla js with jQuery, just stick to one, I'd suggest vanilla.

I did not go your styles entirely to find out which class it uses to handle that bottom effect, which you will have to update, but the top element is working.

Also unlike using jQuery's $ to select elements, when using vanilla js const TopCap = document.querySelector (".carousel-caption"); and have several elements as in each slide, you would have to loop through them and select them all as follow: const TopCap = document.querySelectorAll (".carousel-caption");

Probably your object is not loaded when starting the page, perhaps it is a request. So you need to protect with an IF statement: {{myvideo != null ? myvideo[currentSlideIndex]?.title : ''}}

@Site, I think you're looking for ng-container -that not create an additional tag-

I am now using the PrimeNG Carousel. It does what I want.

My code:

component.html

You can use React.Children.toArray to turn the children prop into an array of children. From the docs:

Returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.

Once you have an array, you can use indexing into the array.

This function will take the selector and the amount and generate an array:

Make sure you import the CSS: