How to change Bootstrap's carousel transition from slide to fade

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?

Are you looking to keep the left to right or right to left slide in addition to the fade-in or fade-out transition? — Lloyd Banks, Nov 06 '13 at 06:11
@LloydBanks trying to get of the left to right slide and use a fade in, fade out transition instead — NewKidOnTheBlock, Nov 06 '13 at 10:17

Frank van Wijk · Answer 1 · 2014-08-25T19:35:17.873

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.

In bootstrap 3, I found that this somehow prevented going to the previous slide. This worked though: http://stackoverflow.com/questions/19231678/how-can-i-change-the-sliding-animation-to-fade-in-out-with-transition-on-bootstr?rq=1 — jduprey, Sep 17 '14 at 15:03

Carol Skelly · Answer 2 · 2018-03-17T23:00:14.863

0

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

edited Mar 17 '18 at 23:00

answered Nov 05 '13 at 15:22

Carol Skelly

351,302
90
710
624

in my first attempt i used the properties you have highlighted above, which can be seen in my plunker example, however it doesn't seem to work for this angularUI carousel, i'm not 100% why? – NewKidOnTheBlock Nov 06 '13 at 10:19

How to change Bootstrap's carousel transition from slide to fade

2 Answers2

Linked