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

关注类似的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

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

Bootstrap轮播字幕动画

2 个答案:

更新