引导旋转木马-字幕动画

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)
})