Bootstrap輪播字幕動畫

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/

UPDATE

要修復標題高度，請添加此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)
})