How to change Bootstrap's carousel transition

Question

I am having a slight issue changing the transition of the AngularUi click here carousel transition I want to change the carousel's standard sliding transition to a fadeIn FadeOut transition Click here the example presented in Plunker i have commented out the css for the sliding transition

`carousel-inner > .item {
        display: none;
        position: relative;
        -webkit-transition: 0.6s ease-in-out left;
        -moz-transition: 0.6s ease-in-out left;
        -o-transition: 0.6s ease-in-out left;
        transition: 0.6s ease-in-out left;`
}

I have attempted to manipulate the css animations slightly by changing it to the following to achieve a fadeIn

 @-webkit-keyframes carousel-inner {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes carousel-inner{
     0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}


.carousel-inner > .item {
    display: none;
    position: relative;
     -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

However it's not working the way I want it too. Has anyone experienced this problem? Or does anyone have a solution to the problem?

Answer 1

I had the same problem and finally got it working. The carousel from angular-ui waits for a transition event to be ended (it uses the transition module which resolves a promise), and then applies the active class to the next slide.

While the transition is playing, both the 'active' and the 'next' slide have the 'next' class. So you need to make sure that the transition already starts when the 'left' classes are applied, otherwise the module doesn't know that the transition is ended to move on to the next slide.

This is the css that changes the carousel from sliding to fading. I added an extra class fading to the carousel outer div.

.carousel.fading .carousel-inner > .item {
  /* Override the properties for the default sliding carousel */
  display: block;
  position: absolute;
  left: 0 !important;

  /* Hide slides by default */
  opacity: 0;

  /* Set transition to opactity */
  -moz-transition: .6s ease-in-out opacity;
  -webkit-transition: .6s ease-in-out opacity;
  -o-transition: .6s ease-in-out opacity;
  transition: .6s ease-in-out opacity;
}

/* Active slides are visible on transition end */
.carousel.fading .carousel-inner > .active,
/* Next slide is visible during transition */
.carousel.fading .carousel-inner > .next.left {
    opacity: 1;
}
.carousel.fading .carousel-inner > .next,
.carousel.fading .carousel-inner > .active.left {
    opacity: 0;
}

This is the SCSS code I am using:

.carousel.fading {
  .carousel-inner {
    height: 360px;
    .item {
      display: block;
      position: absolute;
      left: 0 !important;
      opacity: 0;
      @include transition(.6s ease-in-out opacity);
      &.active, &.next.left {
        opacity: 1;
      }
      &.next, &.active.left {
        opacity: 0;
      }
    }
  }
}

I also had to set height of the carousel-inner div to the height of my images, because the slides are positioned absolute now.

Answer 2

Update 2018

Bootstrap 4.1 will include a carousel-fade transition explained here: Bootstrap 4.0.0 Carousel fade transition

Bootstrap 3

I have found opacity to work better for a fade effect..

.carousel .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

Demo: http://bootply.com/91957