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?
Share Improve this question asked Jul 26, 2013 at 12:38 user1949366user1949366 4652 gold badges6 silver badges17 bronze badges4 Answers
Reset to default 3I 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.