Spicing Up the Bootstrap Carousel with CSS3 Animations

antonella, thanks for the article. As abhilashsandi mentioned on Apr 1, the animation doesn’t replay in Firefox the second time around if you click to view the next/prev slide before the animation had time to finish. I found this great article on how to restart a CSS animation w/o javascript. See this codepen with the adjustments to the CSS and JS. Basically you temporarily assign a nonexistent animation to the element with CSS. In the article, they apply it with :hover. For this slider you apply it when the carousel item slides. Fortunately, Bootstrap temporarily applies classes “left” and “right” to the items when they slide, so you can temporarily apply the nonexistent animation to the elements using .left.active .animated and .right.active .animated.

Hi Jason,

That’s a great workaround!

As you point out, the problem is noticeable in Firefox. It’s got to do with the way this browser handles animations: I think it stops them when the window is not currently active, which helps with performance. Since the animation works on the animationend event, my guess is that this event isn’t caught if one changes browser window before the animation has completed. It seems to me you also changed the doAnimations() function by getting rid of the reliance on the animationend event to remove the Animate.css classes.

You could achieve a similar result by using setTimeout:

function doAnimations( elems ) {
  elems.each(function () {
     var $this = $(this),
         $animationType = $this.data('animation');
         $this.addClass($animationType);
         var wait = window.setTimeout( function() {
             $this.removeClass($animationType) 
         }, 5000);
   }); 
}

If you use the above, there’s no need to change the CSS.

Thank you so much for sharing your solution, it’s awesome :slight_smile:

Hi Antonella,

I implemented the bootstrap carousel as you described in my one-page website and it’s working fine.

I wanted to ask you, if you know if there is a possibility to use the buttons in the captions as a link. That is, I want to use the buttons as they were links of the navbar to get to the other pages of the website.

I tried it with the a href tag:

<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight"><a href="#about">About</a></button>

But this does not work. Is it possible that the a href tag collides with the CSS3 Animations?

Do you have any idea maybe?

Thanks a lot, Pete

Hi Pete,
Thanks for your comment. I haven’t tried this, but I think in principle it should work: the JS script doesn’t interact with the href attribute; it only gathers the animation data, adds the data as classes, and then removes those same classes.

I’m not too sure, however, about using the buttons inside the carousel as navigation. Navigation needs to be always accessible and an animated slider with animated buttons might not be ideal. But perhaps it works well for your design.

Could you please post a link to your project so it might be easier to help.

Cheers!

Hi,

thanks for your reply. Sorry that I cannot provide a link as I’m testing local.

What I want to achieve is the following:

When a user clicks on a menu item, I don’t want to carry him directly to the new page. Instead I want to make the respective slide be visible. There, the user gets the principal information about the item and from there he can go to the page digging into deeper information by clicking a button on that slide.

I achieved the first issue (changing the slide by clicking on the menu item) like so:

<li><a href="#carousel-example-generic" data-slide-to="1">About</a></li>

And this works fine.

But when I try to give the button on this slide - which brings the user to the “About” page - an a href, that doesn’t work.
It is strange as it is a simple anchor for the button, and as a button actually brings you to another information by using any kind of anchor anyway.

That’s why I asked if the code for the “spiced” carousel frustates the button functionality.

I’m using also the scrollspy functionality as the website has a one-page design. So maybe the problem lies there.

I know that my question isn’t really about “Spicing Up the Bootstrap Carousel with CSS3 Animations”-topic. But maybe you have an idea.

Thank you for the animations on the bootstrap carousel anyway.

Regards, Pete

Hello great job, we thank you for this.

I’ve been testing, because I wanted to integrate it into Joomla. by:

$document->addScript('assets/animate-caroudel.js);
$documnet->addStylesheet('asstes/animate-carousel.css);

This sends the files to the <head> of the page and not working.

but when I hit the js code in the php file if it works.
tabmbien works if the file named after the HTML code.

there any way to make this work by sending it to <head>

(Asking out of school) Are the quote marks correct in the above snippit? They seem unbalanced.

The error occurred because enter the code here and do not copy it; and when I wanted to not let me edit.

$document->addScript('assets/animate-caroudel.js');
$documnet->addStylesheet('asstes/animate-carousel.css');

The problem is that to send to the <head> javascript code not working

Ronpat. You’ll have a solution?

No, I do not write JavaScript so I cannot help. Sorry.

Hi antonella,

Im like big fan of yours You help me a lots In bootstrap . Well Im new in bootstrap and not much good in JavaScript but this is very helpful thanx a ton but i notice that in firefox it not work well after around 3min text not animate just carousel only slide but text not animate please help me and sorry for my English Im not good in english thanx and waiting ur solution :smile:

Hi Rintu,

Thank you so much for your kind words and your feedback: it’s great you’ve been finding the content helpful.

As for the issue you point out, it’s got to do with how Firefox handles animations: when the browser window is not active, Firefox stops the animation, which is good for performance, not so good for this demo.

Because the carousel script relies on the animationend event to remove and then add the relevant classes, if you leave the browser window where the carousel is running before the animation has completed, Firefox stops the animation and the script can’t catch the animationend event. You’ll find an alternative solution by Jason Johnson and one by me in the comments above.

I hope this solves the problem for you :smile:
Cheers!

1 Like

Much gratitude for a great article. Splendid, simply splendid. One issue: after removing the pause statement, I don’t see that after adding the interval – any change from 4000 up or down does not seem to be working in Chrome or Firefox or Safari. Anyone else experiencing this?

Thank you so much for your comment!

If you’re using the timer you shouldn’t encounter serious issues. I’ve tried with 5000, 6000 and up and it’s working fine. Perhaps you need to adjust the animation-delay property in the CSS. If I go lower than 4000 I’ll have to revise the value of the animation-delay property: as it stands, the entire animation of all three elements in the slider takes 3 seconds, therefore any value lower than this in the timer has a negative effect on the resulting animation.

What’s exactly not working on your end? Could you please post a link to your code?

Cheers!

Thank you thank u thank u thank u soooo much for your response antonella.

And Thank you so much for help me as you mention before in your comment your java script working fine in Firefox :slight_smile: Thank you so much

Thank you!!! So happy the script worked

1 Like

I am using your source files. No changes except commenting out the $myCarousel.carousel(‘pause’); line and adding the $myCarousel.carousel({interval: 4000 }); line. No other changes, but no difference in 4000 or any greater value.

Hi Mrgrnboro,
Thanks for getting back to me. What’s not working? The carousel is not sliding? The animations are not happening or are not synchronized?

As it stands, 4000 works well with all the other settings that control the working of the Carousel. If you change the seconds in the timer, you most likely have to adjust other values like the animation-delay property in the CSS and/or the interval property of the Carousel in the JS file. If you’d like to slow down the carousel try adjusting these values, perhaps even the transition property of the sliders. It depends on what you’re trying to achieve and experiment with different values.

Hi antonella,

I´m using gsap to animate the captions. Do you have any idea how can I reverse the animations before the next slide comes into view.

I´m trying that out with slide.bs.carousel custom event, but don´t know exactly where to put it in the code.

Any hint would be much appreciated.

Best regards, Pete

Hi again,

please have a look at this codepen for better understanding: http://codepen.io/anon/pen/pgowvM

Where would I put the reverse animations here?

Regards, Pete

Hello Antonella,

Another quick question. I looks like you have been so generous with your time. I have (http://www.webmentorshipsc.com) that has owl.carousel.min.js, animate.css, owl.carousel.css and other bootstrap files. I’m pleased with the custom data-animations such as bounceinup animations but for the life of me I cannot get the slider to auto play. I’ve edited the css, js and source code HTML with interval suggestions and still nothing. I’m at a loss. Can you help. If you’re ever in San Diego, I owe you a dinner and some beers! LOL!