引导轮播字幕动画

Question

我需要自定义Boostrap3的轮播。

基本上我想做的是：

• 使caption在加载图像一段时间后显示（以给出用户体验看到图片几秒钟，然后caption进来）
• caption应从右到左。
• caption需要填充整个图片。

我试过什么？

轮播标题从下到上显示，它仅适用于第一张幻灯片。

css 标记

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

遵循一个类似的问题，我正在使用这个.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');

这是一个现场演示

Answer 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/

Answer 2

这是一个淡化活动标题的简单片段，其他动画（例如滑动）可以使用 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)
})