Bootstrap轮播字幕动画 [英] Bootstrap carousel-caption animation

问题描述

我需要定制 Boostrap3 的轮播。

基本上我想做的是：

• 在图片加载后的某个时候出现 caption b $ b用户的体验看到的图片几秒钟，然后标题
  进来）


• caption 应该从右到左。





我尝试了什么？

$ b

  .carousel-caption {
 display：none; 
 right：0; 
 bottom：0; 
 left：0; 
 top：0; 
 padding-bottom：30px; 
 background：rgba（100，100，100，0.5）; 
} 
  

关注类似问题，我使用这个.js

Js markup

  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（'滑动滑块'，toggleCaption）.trigger（'slid'）; 
  

以下是实时 演示

解决方案

添加 jQuery UI ，并在 切换 以获得其他功能，在开始动画之前等待一段时间，您可以使用 delay 。

在bootstrap3中挂钩的正确事件是 .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/

I need to customize the carousel of Boostrap3.

Basically what I'm trying to do is:

• Making the caption appear a while after the image was loaded (to give the user the experience to see the pic a few secs, then the caption comes in)
• The caption should come from right to left.
• The caption needs to fill the entire pic.

What have I tried?

The carrousel-caption shows up from bottom to top and it works only on the first slide.

Css markup

.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 markup

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

解决方案

To slide right to left you can add jQuery UI and use it in toggle for additional features, to wait a bit before start the animation you can use delay.

The correct event to hook in bootstrap3 is slid.bs.carousel, see 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/

UPDATE

To fix the caption height add this height: 100% !important; to its css rule.

Demo: http://jsfiddle.net/IrvinDominin/Y6WH7/1/

这篇关于Bootstrap轮播字幕动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！