Ngx-bootstrap: Carousel doesn't animate the transition between slides

[buddyackerman]

Bug description or feature request:

It doesn't appear that the carousel has the ability to animate the transition between slides like the basic bootstrap carousel is able to. This is an obvious feature that I think should be added.

Also, it'd be nice to be able to specify a class for the previous and next buttons so I could style it with my own button styles consistent with the rest of my site.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 2.0.5

Angular: 5.2.6

Bootstrap: 3.3.5

Build system:

webpack v3.1.0

[Wizardinfosys]

@buddyackerman Did you get any hack for animation?

[buddyackerman]

@Wizardinfosys no I haven't had time to work on that specifically but I was having a different problem with the carousel that make sit look like this won't be possible without a re-write of the component. The reason is is that it appears that the slides are deleted when they are not visible, so it's hard to animate something that doesn't exist.

[RaulKelvin]

You can add transition css to.
For example:

.carousel-inner {
opacity: 1;
background: black;
}

.carousel-inner .item {
opacity: 0.4;
display: table-cell;
-webkit-transition: opacity 3s ease;
-moz-transition: opacity 3s ease;
-o-transition: opacity 3s ease;
transition: opacity 3s ease;
}

.carousel-inner .active {
opacity: 1;
width: 100%;
-webkit-transition: opacity 3s ease;
-moz-transition: opacity 3s ease;
-o-transition: opacity 3s ease;
transition: opacity 3s ease;
}

[wojo1086]

@RaulKelvin Your solution does not work for me. It fades in/out the first image, but won't fade in the rest of them. It will cycle through the images and apply the opacity change, but the images are being loaded.