Bootstrap 轮播字幕动画答案

【问题标题】：Bootstrap carousel-caption animationBootstrap 轮播字幕动画
【发布时间】：2014-01-18 15:43:48
【问题描述】：

我需要自定义Boostrap3的轮播。

基本上我想做的是：

在图像加载后让caption 出现一段时间（给用户体验看到图片几秒钟，然后caption 进来）
caption 应该从右到左。
caption 需要填满整个图片。

我尝试了什么？

carrousel-caption 从下到上显示，仅在第一张幻灯片上有效。

Css 标记

.carousel-caption {
    display: none;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    padding-bottom: 30px;
    background: rgba(100, 100, 100, 0.5);
}

关注一个类似的question，我正在使用这个.js

Js 标记

var carouselContainer = $('.carousel');
var slideInterval = 3000;

function toggleCaption(){
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.slideToggle();
}

carouselContainer.carousel({
    interval: slideInterval,
    cycle: true,
    pause: "hover"
}).on('slid slide', toggleCaption).trigger('slid');

这是现场直播demo

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

要从右向左滑动，您可以添加jQuery UI 并在toggle 中使用它以获得附加功能，在开始动画之前稍等片刻，您可以使用delay。

在 bootstrap3 中挂钩的正确事件是 slid.bs.carousel，参见 http://getbootstrap.com/javascript/#carousel

代码：

var carouselContainer = $('.carousel');
var slideInterval = 3000;

function toggleCaption() {
    $('.carousel-caption').hide();
    var caption = carouselContainer.find('.active').find('.carousel-caption');
    caption.delay(500).toggle("slide", {direction:'right'});
}

carouselContainer.carousel({
    interval: slideInterval,
    cycle: true,
    pause: "hover"
}).on('slid.bs.carousel', function() {
    toggleCaption();
});

演示：http://jsfiddle.net/IrvinDominin/Y6WH7/

更新

要修复标题高度，请将 height: 100% !important; 添加到其 css 规则中。

演示：http://jsfiddle.net/IrvinDominin/Y6WH7/1/

【讨论】：

你说得对，“滑动幻灯片”可以解决问题，我认为我之前应该更好地阅读文档。 Idk 将“jQueryUI”添加到解决方案中......即使如此，它的底部还有一个小错误，你能看到它吗？ +1 顺便说一句，谢谢帮助！
完全忘记检查“！重要”。非常感谢，你解决了我这两天头疼的问题！

【解决方案2】：

这里有一个简单的sn-p来淡化活动标题，其他的动画比如滑动可以用css转场或者其他方法或者js动画库来实现。

$('.carousel').carousel({
  interval: 800000,
  pause: 'true',
  cycle: true
}).on('slide.bs.carousel', (e) => {
  $(e.relatedTarget).find('.carousel-caption').fadeOut(500)
}).on('slid.bs.carousel', (e) => {
  $(e.relatedTarget).find('.carousel-caption').fadeIn(500)
})

【讨论】：