feat(carousel): add transition to carousel

[mdymel]

There is no transition while slides change.

[gitdisrupt]

Any word on this? Seems like all the correct classes are there, but the transition does not work.

[imalhasaranga]

Is this fixed now!! I'm having the same issue

[aepw]

I'm still having the same issue

[jjamaral]

Any updates on that?
Thank you!

[figuerres]

I just looked at the bootstrap web sites for V3 and V4 at the demo of the carousel
and at what I am getting from this package and it looks like some markup is missing or wrong that it needs to make the slide transitions work.
the ol / li in the bootstrap sample is like this
<ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" class=""></li> <li data-target="#myCarousel" data-slide-to="2" class=""></li> </ol>
but in this package the demo page does not have the data-target and data-slide

I suspect this is part of where it fails to do the effects.
I will try and work with the code and see if I can make it work like the bootstrap site example and will post back on what I find.

[figuerres]

it's funny there are multiple samples of carousels and they all seem to have the same missing feature.
also there is another project that his almost the same as this one that seems to say that there is an issues with animations and angular 2 that is blocking them.
see this:
ng-bootstrap/ng-bootstrap#295
also I found this:
http://mlaval.github.io/angular2-bootstrap/
based on the early versions of angular 2 but it has the slide working !
I am trying to update that to the released angular code and markup but I am really new to the angular and typescript stuff so it's taking a bit of time to learn how to get it working with the changes .
https://github.com/mlaval/angular2-bootstrap
hope that info helps some,....

[figuerres]

just a heads up in case anyone is interested that other carousel almost works but something in the changes fro early to release is messing with my trying to make it work
http://mlaval.github.io/angular2-bootstrap/

[kabsila]

any update ?

[Tibo46]

+1

[valorad]

Any update on this issue? I tried manually add transition style
transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out, -o-transform .6s ease-in-out;
on .carousel-item but it is not working.

[cristianstu]

+1

[felipefialho]

Is need to add the classes: next or prev and left or right after the click for it works.

[figuerres]

this will be very nice if we have a release build that works !!

[Pastafarian]

+1

[saostad]

+1

[ghost]

+1

[miloskovacevic]

+1

[hG3n]

+1

[SergiyPakholchak]

+1

[kazafy]

+1

[eranation]

+1

[iFarmGolems]

+1

[nbiles]

+1

[unix]

+1
and you can try this components

[bradysheridan]

+1

[scurk1415]

I would also like the animations/transitions to be implemented :D

+1

[silencieuxle]

+1

[nkrambo]

+1

[royalarjun001]

+1

[eugene159]

Nice library. Dynamic tabs are awesome. But without animations for accordion and image carousel I will have to switch back to regular bootstrap that relies on jQuery :( I really don't want to add jQuery as a dependency to my Angular project, but I have no choice.

[chungkam]

in CSS component i added
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@Keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
in html i added
< carousel >
< slide class="animated fadeIn" >
< img src="xxx.xx" class="carousel-img" >
< /slide >
< / carousel >

it works but the effect look like photo flash..

[woteska]

+1

I started to build an Angular 5 app using the newest Bs (first not ngx bs), but I couldn't control the carousel by jQuery. Then I found ngx bs, but the transition is missing of carousel. :/

[jimmymain]

I see this is on the roadmap now - NB feature. Hope it's done soon...
Tried this: https://www.codeply.com/go/LhLJlldsLN but couldn't get it to work.

[seblemeur]

+1

[navdeep-vdb]

+1
any update on this???

[jabberwockie]

So everyone just have carousels that change images without any kind of transition? Any ways to add any kind of transition so it doesn't seem so... sudden and uncontrolled?

[esoyke]

I had to switch to use this one instead due to the lack of transition support: https://github.com/sheikalthaf/ngu-carousel

This one works well so far, very customizable.

[raugaral]

why ngb-carousel don't take the css classes at the attribute "class" ??

[griga]

To create sliding animation I've came up with next solution

in main styles.scss add

carousel.slide-animated {
  slide.item {
    animation-duration: 1s;
    animation-fill-mode: both;
    &.active {
      width: 100%;
      animation-name: carouselSlideIn;
    }
    &:not(.active) {
      display: table-cell;
      animation-name: carouselSlideOut;
    }
  }
}

@keyframes carouselSlideIn {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes carouselSlideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

You can use it than in component like:

<carousel class="slide-animated">
  <slide><img src="slide1.jpg"/></slide>
  <slide><img src="slide2.jpg"/></slide>
  <slide><img src="slide3.jpg"/></slide>
</carousel>

PS: The single problem left is that slides are always moving from right to left, no matter which arrow you've pressed. I will update answer when/if I resolve this

[ronjb04]

i have modified @griga input and added back animation

html
<carousel (activeSlideChange)="slideChange($event)" >

ts
slideIndex: number; slideDirection:string = "hold"; slideChange(event){ if(this.slideIndex == undefined){ this.slideDirection = "hold"; }else if(this.slideIndex < event){ this.slideDirection = "forward"; }else{ this.slideDirection = "back"; } this.slideIndex = event; }

scss
`carousel{
.item {
animation-duration: 1s;
animation-fill-mode: both;
}
&.forward{
.item{
&.active {
width: 100%;
animation-name: carouselSlideIn;
}
&:not(.active) {
display: table-cell;
animation-name: carouselSlideOut;
}
}
}
&.back{
.item{
&.active {
width: 100%;
animation-name: carouselSlideInBack;
}
&:not(.active) {
display: table-cell;
animation-name: carouselSlideOutBack;
}
}
}

@Keyframes carouselSlideIn {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
@Keyframes carouselSlideOut {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@Keyframes carouselSlideInBack {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
@Keyframes carouselSlideOutBack {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
}`

not sure why the code i added is not showing in code format.. anyhow this is working with back and forward slide animation