javascript - How to change Bootstrap's carousel transition from slide to fade - Stack Overflow

admin管理员组

文章数量:1328620

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 mented 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?

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 mented 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?

• javascript
• jquery
• css
• twitter-bootstrap
• angular-ui-bootstrap

Share Improve this question Follow edited Nov 6, 2013 at 10:33 NewKidOnTheBlock asked Nov 5, 2013 at 15:01 NewKidOnTheBlockNewKidOnTheBlock 1,51133 gold badges1717 silver badges3333 bronze badges 2

• 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 Commented Nov 6, 2013 at 6:11
• @LloydBanks trying to get of the left to right slide and use a fade in, fade out transition instead – NewKidOnTheBlock Commented Nov 6, 2013 at 10:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

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./91957

本文标签： javascriptHow to change Bootstrap39s carousel transition from slide to fadeStack Overflow