twitter-bootstrap Bootstrap 轮播字幕动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21206244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel-caption animation
提问by Luis
I need to customize the carousel of Boostrap3.
我需要自定义Boostrap3.
Basically what I'm trying to do is:
基本上我想做的是：
- Making the
captionappear a while after the image was loaded (to give the user the experience to see the pic a few secs, then thecaptioncomes in) - The
captionshould come from right to left. - The
captionneeds to fill the entire pic.
- 使得
caption出现在图像加载后（给用户的经验看PIC几秒钟，然后caption进来） - 本
caption应来自从右到左。 - 在
caption需要填充的整个照片。
What have I tried?
我试过什么？
The carrousel-caption shows up from bottom to top and it works only on the first slide.
carrousel-caption 从下到上显示，它只适用于第一张幻灯片。
Css markup
CSS 标记
.carousel-caption {
display: none;
right: 0;
bottom: 0;
left: 0;
top: 0;
padding-bottom: 30px;
background: rgba(100, 100, 100, 0.5);
}
Followin a similar question, I'm using this .js
按照一个类似的问题，我正在使用这个 .js
Js markup
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');
Here's a live demo
这是一个现场演示
回答by Irvin Dominin
To slide right to left you can add jQuery UIand use it in togglefor additional features, to wait a bit before start the animation you can use delay.
要从右向左滑动，您可以添加jQuery UI并将其toggle用于其他功能，在开始动画之前稍等片刻，您可以使用delay。
The correct event to hook in bootstrap3 is slid.bs.carousel, see http://getbootstrap.com/javascript/#carousel
在 bootstrap3 中挂钩的正确事件是slid.bs.carousel，请参阅http://getbootstrap.com/javascript/#carousel
Code:
代码：
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();
});
Demo: http://jsfiddle.net/IrvinDominin/Y6WH7/
演示：http: //jsfiddle.net/IrvinDominin/Y6WH7/
UPDATE
更新
To fix the caption height add this height: 100% !important;to its css rule.
要修复标题高度，请将height: 100% !important;其添加到其 css 规则中。
回答by TiagoLr
Here is a simple snippet to fade the active caption, other animations such as sliding can be achieved using css transitions or other methods or js animation libs.
这里有一个简单的片段来淡化活动字幕，其他动画如滑动可以使用 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)
})
