Bootstrap轮播字幕动画

Question

我需要定制旋转木马Boostrap3.

基本上我要做的是:

• 使得caption出现在图像加载后(给用户的经验看PIC几秒钟,然后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/

UPDATE

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

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