I have a boostrap carrousel view that works fine, but the slide show only has one option, tansition in milliseconds.

How can I change the transition to fade instead of slide? I've looked at the css code but it keeps moving, so hard to know what to change, additionally, it seems to be getting the css from boostrap.min.css ...

Site is at:

carousel on home page


you could do that with 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.

| improve this answer | |

you can use CSS transitions like the example below,

.carousel-inner .item {
  left: 0 !important;
  -webkit-transition: opacity .4s; /*adjust timing here */
     -moz-transition: opacity .4s;
       -o-transition: opacity .4s;
          transition: opacity .4s;

/* Fade controls with items */
.carousel-inner .item.next.left,
.carousel-inner .item.prev.right {
    opacity: 1;
    z-index: 1;
.carousel-inner .item.active.left,
.carousel-inner .item.active.right {
    opacity: 0;
    z-index: 2;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.