Is it possible to prevent the caption of a bootstrap carousel from sliding with the background image, and instead, on 'slide' fade out, and on 'slid' the new caption fade in?

Is it possible to prevent the caption of a bootstrap carousel from sliding with the background image, and instead, on 'slide' fade out, and on 'slid' the new caption fade in?

• javascript
• twitter-bootstrap

Share Improve this question Follow asked Jul 26, 2013 at 12:38 user1949366user1949366 46522 gold badges66 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I prefer using the CSS-only solution:

.item.next .carousel-caption {
    opacity: 0;
}

.carousel-caption {
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

It does rely on CSS3 transitions and does therefore not work in older browsers (for IE that means atleast version 10) but it's time to code for the future!

Use jQuery to attach functions to the 'slid' and 'slide' events...

$('#myCarousel').on('slide',function(){
  $('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid',function(){
  $('.carousel-caption').fadeIn(600);
})

Demo with animation: http://bootply./69740

For Bootstrap 3 it would be

$('#myCarousel').on('slide.bs.carousel',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid.bs.carousel',function(){
 $('.carousel-caption').fadeIn(600);
})

This works... It still sort of slides with the carousel, but you do get the fadeOut and fadeIn affect.

$('#myCarousel').on('slide',function(){
    $('#myCarousel .active .carousel-caption').fadeOut();
});

$('#myCarousel').on('slid',function(){
    $('#myCarousel .active .carousel-caption').fadeIn();
});

Here is a fiddle demo.