Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

Question

I have a very basic implementation of the Twitter Bootstrap Carousel plugin on a site that I am working on  http   furnitureroadshow com     I was just wondering if anyone had extended the Carousel plugin so that it fades in and fades out on slide transition   I found this issue  2050 on github com  https   github com twitter bootstrap issues 2050  that seems to suggest that at this point  it isn t possible   Just wanted to see if it could be or has been done

User · Answer

Came across this issue when using Bootstrap 3. My solution was to add the carousel-fade class to the carousel main DIV and slot the following CSS in, somewhere after the Bootstrap CSS is included:

.carousel-fade .item {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  left: 0 !important;
}

.carousel-fade .active {
  opacity: 1 !important;
}

.carousel-fade .left {
  opacity: 0 !important;
  -webkit-transition: opacity 0.5s ease-in-out !important;
  -moz-transition: opacity 0.5s ease-in-out !important;
  -ms-transition: opacity 0.5s ease-in-out !important;
  -o-transition: opacity 0.5s ease-in-out !important;
  transition: opacity 0.5s ease-in-out !important;
}

.carousel-fade .carousel-control {
  opacity: 1 !important;
}

The style transitions that Bootstrap applies mean that you have to have the mid-stride transitions (active left, next left) quickly, otherwise the item just ends up disappearing (hence the 1/2 second transition time).

I haven't experimented with adjusting the .item and .left transition times, but they will probably need adjusting proportionally to keep the effect looking nice.

User · Answer

Yes  Although I use the following code    carousel fade       opacity  1        item               -moz-transition  opacity ease-in-out  7s          -o-transition  opacity ease-in-out  7s          -webkit-transition  opacity ease-in-out  7s          transition  opacity ease-in-out  7s          left  0  important          opacity  0          top 0          position absolute          width  100           display block  important          z-index 1           amp  first-child              top auto              position relative                      amp  active                       opacity  1              -moz-transition  opacity ease-in-out  7s              -o-transition  opacity ease-in-out  7s              -webkit-transition  opacity ease-in-out  7s              transition  opacity ease-in-out  7s              z-index 2                      Then change the class on the carousel from  carousel slide  to  carousel fade    This works in safari  chrome  firefox  and IE 10   It will correctly downgrade in IE 9   however  the nice face effect doesn t happen   Edit  Since this answer has gotten so popular I ve added the following which rewritten as pure CSS instead of the above which was LESS    carousel fade     opacity  1     carousel fade  item     -moz-transition  opacity ease-in-out  7s    -o-transition  opacity ease-in-out  7s    -webkit-transition  opacity ease-in-out  7s    transition  opacity ease-in-out  7s    left  0  important    opacity  0    top 0    position absolute    width  100     display block  important    z-index 1     carousel fade  item first-child     top auto    position relative     carousel fade  item active     opacity  1    -moz-transition  opacity ease-in-out  7s    -o-transition  opacity ease-in-out  7s    -webkit-transition  opacity ease-in-out  7s    transition  opacity ease-in-out  7s    z-index 2

User · Answer

Yes  Bootstrap uses CSS transitions so it can be done easily without any Javascript   The CSS    carousel  item  -webkit-transition  opacity 3s  -moz-transition  opacity 3s  -ms-transition  opacity 3s  -o-transition  opacity 3s  transition  opacity 3s    carousel  active left  left 0 opacity 0 z-index 2    carousel  next  left 0 opacity 1 z-index 1     I noticed however that the transition end event was firing prematurely with the default interval of 5s and a fade transition of 3s  Bumping the carousel interval to 8s provides a nice effect   Very smooth

User · Answer

Yes  Bootstrap uses CSS transitions so it can be done easily without any Javascript  Just use CSS3  Please take a look at  carousel carousel-fade   in the CSS of the following examples     http   jsfiddle net seemly ww67B 123  http   bootply com 86170 http   codepen io Rowno pen Afykb

User · Answer

If you are using Bootstrap 3 3 x then use this code  you need to add class name carousel-fade to your carousel     carousel-fade  carousel-inner  item     -webkit-transition-property  opacity            transition-property  opacity     carousel-fade  carousel-inner  item   carousel-fade  carousel-inner  active left   carousel-fade  carousel-inner  active right     opacity  0     carousel-fade  carousel-inner  active   carousel-fade  carousel-inner  next left   carousel-fade  carousel-inner  prev right     opacity  1     carousel-fade  carousel-inner  next   carousel-fade  carousel-inner  prev   carousel-fade  carousel-inner  active left   carousel-fade  carousel-inner  active right     left  0    -webkit-transform  translate3d 0  0  0             transform  translate3d 0  0  0      carousel-fade  carousel-control     z-index  2

User · Answer

Note  If you are using Bootstrap   AngularJS   UI Bootstrap   left  right and  next classes are never added  Using the example at the following link and the CSS from Robert McKee answer works  I wanted to comment because it took 3 days to find a full solution  Hope this helps others   https   angular-ui github io bootstrap   carousel  Code snip from UI Bootstrap Demo at the above link   angular module  ui bootstrap demo   controller  CarouselDemoCtrl   function   scope       scope myInterval   5000    var slides    scope slides          scope addSlide   function         var newWidth   600   slides length   1      slides push         image   http   placekitten com     newWidth     300         text    More   Extra   Lots of   Surplus   slides length   4                    Cats    Kittys    Felines    Cutes   slides length   4                 for  var i 0  i lt 4  i           scope addSlide              Html From UI Bootstrap  Notice I added the  fade class to the example    lt div ng-controller  CarouselDemoCtrl  gt       lt div style  height  305px  gt           lt carousel class  fade  interval  myInterval  gt             lt slide ng-repeat  slide in slides  active  slide active  gt               lt img ng-src    slide image    style  margin auto   gt               lt div class  carousel-caption  gt                 lt h4 gt Slide    index   lt  h4 gt                 lt p gt   slide text   lt  p gt               lt  div gt             lt  slide gt           lt  carousel gt       lt  div gt   lt  div gt    CSS from Robert McKee s answer above   carousel fade   opacity  1     carousel fade  item   -moz-transition  opacity ease-in-out  7s  -o-transition  opacity ease-in-out  7s  -webkit-transition  opacity ease-in-out  7s  transition  opacity ease-in-out  7s  left  0  important  opacity  0  top 0  position absolute  width  100   display block  important  z-index 1     carousel fade  item first-child   top auto  position relative     carousel fade  item active   opacity  1  -moz-transition  opacity ease-in-out  7s  -o-transition  opacity ease-in-out  7s  -webkit-transition  opacity ease-in-out  7s  transition  opacity ease-in-out  7s  z-index 2       Added z-index to raise the left right controls to the top     carousel-control   z-index 3

[jquery] Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to carousel