simple-carousel | An example of a carousel | Carousel library

I followed this fantastic article, that demonstrates how to make a simple carousel with the use of two directives and one component in Angular.

The feature set is very limited, and does not include an 'infinite scrolling' mode, which I would like to add.

By 'inifinite scroll' - I mean something like this jQuery equivalent:

I'm currently busy creating a custom vue carousel component. I have been using some parts of the code from here: link

At this moment I want to be able to make the slider have an extra feature which should be little navigation bullets. For this I need to know the active slide which is visible. Because of the justify-content:center it always shows the middle item in my array.

I currently want to calculate the active item by defining the middle item in my array. I try to do this as follows:

Trying to get a bootstrap 4 carousel functionality to do this (below image is a bootstrap 3 variant)

I tried converting this to bootstrap 4. What I did to it was run it through a bootstrap 3 → to bootstrap 4 html conversion tool on the html, and adjust references to the bootstrap JS and CSS files from the CDN. I also changed image references with color so its easier to distinguish which images I want to be shown.

Below is the code, it isn't showing all 4 images on one slide

I'mm trying to put a carousel into a page. I copied the code from Bootsnips and the other solution for this same problem haven't worked.

My HTML Code is as follows:

How would I go about adjusting the carousel control buttons to the centre on a sliding image div tag? Its only liking being "floated" to the left, except when I take the float:left CSS attribute, they go vertical instead of horizontal - what am I doing wrong here?