1

是否可以防止引导轮播的标题与背景图像一起滑动，而是在“滑动”时淡出，而在“滑动”时新标题淡入？

4

4 回答 4

3

我更喜欢使用纯 CSS 解决方案：

.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;
}

它确实依赖于 CSS3 过渡，因此在较旧的浏览器中不起作用（对于 IE，这意味着至少版本 10），但现在是时候为未来编写代码了！

于 2014-06-11T21:36:10.600 回答
1

对于 Bootstrap 3，它将是

$('#myCarousel').on('slide.bs.carousel',function(){
$('.carousel-caption').fadeOut(300);
})
$('#myCarousel').on('slid.bs.carousel',function(){
 $('.carousel-caption').fadeIn(600);
})
于 2014-02-01T10:10:35.203 回答
1

使用 jQuery 将函数附加到 'slide' 和 'slide' 事件...

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

动画演示：http: //bootply.com/69740

于 2013-07-26T13:58:24.653 回答
0

这行得通...它仍然可以与旋转木马一起滑动，但是您确实会受到淡出和淡入的影响。

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

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

这是一个小提琴演示。

于 2013-07-26T13:58:00.083 回答