Bootstrap 3 Carousel fading to new slide instead of sliding to new slide

Question

I am using Bootstrap 3  unmodified   Here s   lt  -- Carousel                                                    -- gt   lt div id  myCarousel  class  carousel slide  gt     lt  -- Indicators -- gt     lt ol class  carousel-indicators  gt       lt li data-target   myCarousel  data-slide-to  0  class  active  gt  lt  li gt       lt li data-target   myCarousel  data-slide-to  1  gt  lt  li gt     lt  ol gt     lt div class  carousel-inner  gt       lt div class  item active carousel-1  gt         lt div class  container  gt           lt div class  carousel-caption  gt             lt h1 gt Example headline  lt  h1 gt             lt p gt Cras justo odio  dapibus ac facilisis in  egestas eget quam  Donec id elit non mi porta gravida at eget metus  Nullam id dolor id nibh ultricies vehicula ut id elit  lt  p gt             lt p gt  lt a class  btn btn-large btn-primary  href     gt Sign up today lt  a gt  lt  p gt           lt  div gt         lt  div gt       lt  div gt       lt div class  item carousel-2  gt         lt div class  container  gt           lt div class  carousel-caption  gt             lt h1 gt Another example headline  lt  h1 gt             lt p gt Cras justo odio  dapibus ac facilisis in  egestas eget quam  Donec id elit non mi porta gravida at eget metus  Nullam id dolor id nibh ultricies vehicula ut id elit  lt  p gt             lt p gt  lt a class  btn btn-large btn-primary  href     gt Learn more lt  a gt  lt  p gt           lt  div gt         lt  div gt       lt  div gt      lt  div gt     lt a class  left carousel-control  href   myCarousel  data-slide  prev  gt  lt span class  glyphicon glyphicon-chevron-left  gt  lt  span gt  lt  a gt     lt a class  right carousel-control  href   myCarousel  data-slide  next  gt  lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt  lt  a gt   lt  div gt  lt  --   carousel -- gt    default css from bootstrap 3    carousel     position  relative      carousel-inner     position  relative    width  100     overflow  hidden      carousel-inner  gt   item     position  relative    display  none    -webkit-transition  0 6s ease-in-out left            transition  0 6s ease-in-out left      carousel-inner  gt   item  gt  img   carousel-inner  gt   item  gt  a  gt  img     display  block    height  auto    max-width  100     line-height  1      carousel-inner  gt   active   carousel-inner  gt   next   carousel-inner  gt   prev     display  block      carousel-inner  gt   active     left  0      carousel-inner  gt   next   carousel-inner  gt   prev     position  absolute    top  0    width  100       carousel-inner  gt   next     left  100       carousel-inner  gt   prev     left  -100       carousel-inner  gt   next left   carousel-inner  gt   prev right     left  0      carousel-inner  gt   active left     left  -100       carousel-inner  gt   active right     left  100       carousel-control     position  absolute    top  0    bottom  0    left  0    width  15     font-size  20px    color   ffffff    text-align  center    text-shadow  0 1px 2px rgba 0  0  0  0 6     opacity  0 5    filter  alpha opacity 50       carousel-control left     background-image  -webkit-gradient linear  0 top  100  top  from rgba 0  0  0  0 5    to rgba 0  0  0  0 0001       background-image  -webkit-linear-gradient left  color-stop rgba 0  0  0  0 5  0   color-stop rgba 0  0  0  0 0001  100       background-image  -moz-linear-gradient left  rgba 0  0  0  0 5  0  rgba 0  0  0  0 0001  100      background-image  linear-gradient to right  rgba 0  0  0  0 5  0  rgba 0  0  0  0 0001  100      background-repeat  repeat-x    filter  progid DXImageTransform Microsoft gradient startColorstr   80000000   endColorstr   00000000   GradientType 1       carousel-control right     right  0    left  auto    background-image  -webkit-gradient linear  0 top  100  top  from rgba 0  0  0  0 0001    to rgba 0  0  0  0 5       background-image  -webkit-linear-gradient left  color-stop rgba 0  0  0  0 0001  0   color-stop rgba 0  0  0  0 5  100       background-image  -moz-linear-gradient left  rgba 0  0  0  0 0001  0  rgba 0  0  0  0 5  100      background-image  linear-gradient to right  rgba 0  0  0  0 0001  0  rgba 0  0  0  0 5  100      background-repeat  repeat-x    filter  progid DXImageTransform Microsoft gradient startColorstr   00000000   endColorstr   80000000   GradientType 1       carousel-control hover   carousel-control focus     color   ffffff    text-decoration  none    opacity  0 9    filter  alpha opacity 90       carousel-control  icon-prev   carousel-control  icon-next   carousel-control  glyphicon-chevron-left   carousel-control  glyphicon-chevron-right     position  absolute    top  50     left  50     z-index  5    display  inline-block      carousel-control  icon-prev   carousel-control  icon-next     width  20px    height  20px    margin-top  -10px    margin-left  -10px    font-family  serif      carousel-control  icon-prev before     content    2039       carousel-control  icon-next before     content    203a       carousel-indicators     position  absolute    bottom  10px    left  50     z-index  15    width  60     padding-left  0    margin-left  -30     text-align  center    list-style  none      carousel-indicators li     display  inline-block    width  10px    height  10px    margin  1px    text-indent  -999px    cursor  pointer    border  1px solid  ffffff    border-radius  10px      carousel-indicators  active     width  12px    height  12px    margin  0    background-color   ffffff      carousel-caption     position  absolute    right  15     bottom  20px    left  15     z-index  10    padding-top  20px    padding-bottom  20px    color   ffffff    text-align  center    text-shadow  0 1px 2px rgba 0  0  0  0 6       carousel-caption  btn     text-shadow  none      media screen and  min-width  768px       carousel-control  icon-prev     carousel-control  icon-next       width  30px      height  30px      margin-top  -15px      margin-left  -15px      font-size  30px         carousel-caption       right  20       left  20       padding-bottom  30px         carousel-indicators       bottom  20px          some css that I ve added        carousel     height  500px     carousel-inner     height  100       carousel-1     height  100     background  url    images carousel1 jpg   no-repeat center center fixed    -webkit-background-size  cover    background-size  cover      carousel-2     height  100     background  url    images carousel2 jpg   no-repeat center center fixed    -webkit-background-size  cover    background-size  cover      but I can t figure out how I can this carousel with fading effect  I tried to change opacity from 1 to 0  when active item  but it makes 2 animations  it slides left and changes opacity too    Can you help me

User · Answer

Check this out   http   codepen io Rowno pen Afykb   carousel-fade        carousel-inner            item               opacity  0              transition-property  opacity                  active           opacity  1              active left       active right           left  0          opacity  0          z-index  1              next left       prev right           opacity  1            Works marvellously  I hope it works

User · Answer

In reply to gerardnll s answer the Less code to extend Bootstrap 3 3 x carousel by fade effect         Carousel Fade effect    --------------------------------------------------     inspired from http   codepen io Rowno pen Afykb  carousel-fade         carousel-inner            item                opacity 0                transition-property opacity                  transition-duration  8s                       active                opacity 1                 amp  left               amp  right                   left  0                   opacity 0                   z-index  1                                    next left           prev right                opacity 1                         carousel-control           z-index  2              WHAT IS NEW IN 3 3       Added transforms to improve carousel performance in modern browsers      now override the 3 3 new styles for modern browsers  amp  apply opacity  media all and  transform-3d    -webkit-transform-3d          carousel-fade             carousel-inner                 gt   item                    amp  next                   amp  prev                   amp  active right                   amp  active left                        opacity 0                        translate3d 0  0  0                                       amp  next left                   amp  prev right                   amp  active                        opacity 1                        translate3d 0  0  0                                                          The only thing is the transition duration which is not working as expected when longer than  8s  around   Maybe someone has a solution to solve this strange behaviour   Note  The LESS code has  transition-duration  8s   commented  so the default carousel transition duration is used  You can play with the value and see the effect  Longer duration    0 8  renders the fade effect less smooth

User · Answer

The update from 3 2 x to 3 3 x broke some of the solutions explained here and on other threads because of the change   Added transforms to improve carousel performance in modern browsers    If you are using Bootstrap 3 3 x there s a solution here  http   codepen io transportedman pen NPWRGq  Basically you need to add the  carousel-fade  class to your carousel so that you have    lt div class  carousel slide carousel-fade  gt   And then include the following CSS        Bootstrap Carousel Fade Transition  for Bootstrap 3 3 x    CSS from        http   codepen io transportedman pen NPWRGq   and             http   stackoverflow com questions 18548731 bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide   Inspired from   http   codepen io Rowno pen Afykb      carousel-fade  carousel-inner  item     opacity  0    transition-property  opacity      carousel-fade  carousel-inner  active     opacity  1      carousel-fade  carousel-inner  active left   carousel-fade  carousel-inner  active right     left  0    opacity  0    z-index  1      carousel-fade  carousel-inner  next left   carousel-fade  carousel-inner  prev right     opacity  1      carousel-fade  carousel-control     z-index  2          WHAT IS NEW IN 3 3   Added transforms to improve carousel performance in modern browsers     Need to override the 3 3 new styles for modern browsers  amp  apply opacity     media all and  transform-3d    -webkit-transform-3d         carousel-fade  carousel-inner  gt   item next       carousel-fade  carousel-inner  gt   item active right         opacity  0        -webkit-transform  translate3d 0  0  0                 transform  translate3d 0  0  0              carousel-fade  carousel-inner  gt   item prev       carousel-fade  carousel-inner  gt   item active left         opacity  0        -webkit-transform  translate3d 0  0  0                 transform  translate3d 0  0  0              carousel-fade  carousel-inner  gt   item next left       carousel-fade  carousel-inner  gt   item prev right       carousel-fade  carousel-inner  gt   item active         opacity  1        -webkit-transform  translate3d 0  0  0                 transform  translate3d 0  0  0

User · Answer

I used the plain  css  It worked great  Note that I deleted the following from the bootstrap min css      Fade transition for carousel items      carousel  item      left  0  important     -webkit-transition  opacity  4s        adjust timing here        -moz-transition  opacity  4s      -o-transition  opacity  4s      transition  opacity  4s       carousel-control       background-image  none  important         remove background gradients on controls            Fade controls with items      next left   prev right      opacity  1      z-index  1      active left   active right      opacity  0     z-index  2

User · Answer

you can use transition in css3    x000D   x000D   carousel-fade  carousel-inner  item   x000D    -webkit-transition-property  opacity  x000D    transition-property  opacity  x000D    x000D   carousel-fade  carousel-inner  item  x000D   carousel-fade  carousel-inner  active left  x000D   carousel-fade  carousel-inner  active right   x000D    opacity  0  x000D    x000D   carousel-fade  carousel-inner  active  x000D   carousel-fade  carousel-inner  next left  x000D   carousel-fade  carousel-inner  prev right   x000D    opacity  1  x000D    x000D   carousel-fade  carousel-inner  next  x000D   carousel-fade  carousel-inner  prev  x000D   carousel-fade  carousel-inner  active left  x000D   carousel-fade  carousel-inner  active right   x000D    left  0  x000D    -webkit-transform  translate3d 0  0  0   x000D            transform  translate3d 0  0  0   x000D    x000D   carousel-fade  carousel-control   x000D    z-index  2  x000D    x000D   x000D   x000D

User · Answer

for bootstrap 3  this is what i used   carousel-fade  carousel-inner  item     opacity  0    -webkit-transition-property  opacity    -moz-transition-property  opacity    -o-transition-property  opacity    transition-property  opacity     carousel-fade  carousel-inner  active     opacity  1     carousel-fade  carousel-inner  active left   carousel-fade  carousel-inner  active right     left  0    opacity  0    z-index  1     carousel-fade  carousel-inner  next left   carousel-fade  carousel-inner  prev right     opacity  1     carousel-fade  carousel-control     z-index  2

User · Answer

This can be accomplished using only CSS  To change the carousel to a fade transition instead of slide  use one of the following snippets  LESS or standard CSS     LESS     Fade transition for carousel items  carousel      item       left  0  important       transition opacity  4s     adjust timing here        carousel-control       background-image  none     remove background gradients on controls          Fade controls with items    next left     prev right       opacity  1      z-index  1         active left     active right       opacity  0      z-index  2          Plain CSS      Fade transition for carousel items     carousel  item       left  0  important        -webkit-transition  opacity  4s    adjust timing here             -moz-transition  opacity  4s             -o-transition  opacity  4s                transition  opacity  4s     carousel-control       background-image  none  important     remove background gradients on controls         Fade controls with items     next left   prev right       opacity  1      z-index  1     active left   active right       opacity  0      z-index  2

User · Answer

You can achieve a fade effect  instead of sticking with the default slide  using css only  Add these to your stylesheet   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

User · Answer

Some good answers  but the problem with all solutions I have tried is that the images doesn  t fade into each other  Instead the first one fades completely out and than the next one fades in   After a few hours of testing a found this sollution  Thx to http   www 1squarepear com adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides    In the HTML code change from  slide to  fade on the  carousel element Add this in the css    carousel fade        opacity  1     carousel fade  item       transition  opacity ease-out  7s      left  0      opacity  0     hide all slides        top  0      position  absolute      width  100       display  block     carousel fade  item first-child       top  auto      opacity  1     show first slide        position  relative     carousel fade  item active       opacity  1

[twitter-bootstrap] Bootstrap 3 Carousel fading to new slide instead of sliding to new slide

Examples related to twitter-bootstrap