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 es in)
• The caption should e 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

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 es in)
• The caption should e 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

• javascript
• jquery
• html
• css
• twitter-bootstrap

2 Answers 2

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./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/IrvinDominin/Y6WH7/

UPDATE

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

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

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.

$('.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)
})