Spicing Up the Bootstrap Carousel with CSS3 Animations

article
#1

Originally published at: http://www.sitepoint.com/bootstrap-carousel-with-css3-animations/

Adding a slider or carousel to showcase content on a website is a common client’s request for developers. The amount of free and premium carousel plugins available is overwhelming, and a good many of them offer many useful configuration options and dynamic effects.

There are times, however, when a lightweight carousel with minimal options is all you need. In this case, if your project uses Bootstrap, the popular open source front-end framework, you won’t need to look any further than the Bootstrap Carousel component.

In this article, I’m going to show how to add some fun animation effects to the Bootstrap Carousel, while still making sure this handy JavaScript component remains bloat-free and quick to implement.

Introducing Animate.css

As rewarding as crafting my own animation effects can be, I’m going to use a well-known open source CSS3 animation library most aptly called Animate.css, by Dan Eden.

This is so that I can focus on the task at hand, rather than on explaining the code for CSS3 animations. However, if you want to delve into that topic, you’ll enjoy the CSS3 Animations series here on SitePoint, by Craig Buckler.

Using Animate.css requires two steps:


  1. Include animate.min.css in the section of your HTML document.

  2. Add the classes of animated yourchosenanimation to the elements you intend to animate on your web page.

In the latter step you would replace “yourchosenanimation” with the class name corresponding to any of the numerous animations you see on the Animate.css website.

Introducing the Bootstrap Carousel

The Bootstrap Carousel component has three main sections:


  • The Carousel indicators track the overall number of slides, give users a visual clue of the position the slide currently being viewed occupies, and offer an alternative navigation for the slider.

  • The Carousel item, located inside a wrapper container with a class of .carousel-inner, represents each individual slide. It’s inside each item that you place your images. You can also add captions to your slides. The nice thing is that you can put pretty much any HTML element inside a container with the class of carousel-caption and Bootstrap will take care of the styling and formatting. It’s these captions that we’re going to animate.

  • Finally, the Carousel controls are the navigation arrows that enable users to access the next and previous slides.

Bootstrap Carousel structure

If you’d like to explore the Bootstrap Carousel component in detail, be sure check out Creating JavaScript Sliders Using Bootstrap 3, by Syed Fazle Rahman.

Continue reading this article on SitePoint

1 Like
#2

Thank you so much for this solution! It was just what I was after.

Want to ask though, as I'm not a Jquery expert, how do you write fallbacks for the animation to work in IE9?

Thanks again

#3

Hi MDP,
Thanks for your comments!

As for IE9 support, if you're talking about the carousel captions animations included in the demo, they can be considered an enhancement, and by the principle of graceful degradation, could be safely ignored by older browsers without much loss. The real problem is with the Bootstrap carousel itself. On the Twitter Bootstrap website is clearly stated:

Bootstrap exclusively uses CSS3 for its animations, but Internet
Explorer 8 & 9 don't support the necessary CSS properties. Thus,
there are no slide transition animations when using these browsers.
We have intentionally decided not to include jQuery-based fallbacks for the transitions.

This means that you need to extend this plugin yourself if supporting IE9 is important to you. If jQuery is not your forte, browsing the Internet might be an option. For instance, I found this fallback:
https://gist.github.com/barryvdh/6155151
I haven't tried it myself, but you can test it and see if it works in your project.

#4

Hey there, thanks very much for the reply. Yeah I came across that yesterday after doing a search but I'm not sure how to implement it. I tried to just include it as the last item to load on my page but it did not work, it just made the arrows un-clickable. I left a message to the author so hopefully someone can help out.

Thanks again

#5

My guess is that it's to be used in place of the original Bootstrap carousel plugin. If you exclude the Carousel plugin that comes bundled up with Bootstrap and use this instead, you should be good to go.

#6

Thanks very much, will give it a go! Thanks again for the awesome slider!

*Edit: Works now! I had to recompile the bootstrap and leave the carousel out of the build (http://getbootstrap.com/customize/). Then it was as simple as linking the fix in the HTML.

#7

Great!

#8

Antonella, first of all I'd like to thanks you for this post, It's motivated me to study Jquery and CSS3. I've copied the files to my own website files and there seems they are not being initialised, the itens in caption are remained static. I'd appreacite any tips for beginners! Thank you smile

#9

Hi Andrepd,

If my post has motivated you to study jQuery and CSS3, you've made my day!
I'd like very much to help you, but I need a link to your website to do so. I can't see what's going on from here.
Cheers!

3 Likes
#10

Hi.Very good article.
But animation not working in Firefox from second time onwards.

#11

Hi abhilashsandi,
Thank you. Could you be more specific on what doesn't work in FF? What do you mean by second time?
Cheers!

#13

Hi Antonella,

Your tutorial is great thank you very much for sharing such an important customization on bootstrap carousel. I have one problem I want to control carousel-caption according to slide movement.when next slide comes up carousel-caption comes in fadeIn from bottom so when I click previous dots navigation like bottom to top the active slide caption should fadeout towards bottom and new caption will come along with slide from top to bottom.

there is an example what I am looking for.
http://nicolas-bussiere.fr/

many thanks in advance

#14

Great work, Antonella!

You could just add the (-webkit-animation-delay) in your explanation to help some people with trouble in Chrome, Opera and Safari.

#15

Thank you so much!

#17

Hi magtechpro, thank you so much for your comment!

As I understand your requirements, you need to attach two types of animation to the captions, one on the next slide as it become visible and one on the previous slide as it gets hidden.

The Animate.css library should have the right animation types for you to choose from.

You'll need to add some mods to the doAnimations() function. At the top of my head, you don't need to grab the animation types from the data attributes in your HTML because you already have two specific animation types that you want to implement on the way in and on the way out. So, add two variables to store the different animation types.

Next, you'll need to target both the current panel and the previous panel with respect to the current one so that you can attach one type of animation to the captions located in the current panel and another type of animation to the captions located in the previous panel. If you're OK targeting elements with jQuery you could have a go at experimenting with the code yourself. I haven't tried it myself, but I might as soon as I get some free time.

Cheers smile

#18

Hi Antonella,

Thank you very much of your kind reply I will try to implement what you have been suggested me. Another question the example site (http://nicolas-bussiere.fr/) how can i make the same animation effects between pages going back and forth if you click first link of the slide it takes you another page with very smooth slide animation on next page if you click the downarrow link page will go up and new page will popup from bottom very impressive animation.

Please if you could give me any idea how to accomplish this kinda animation with jquery either css3.

I will appreciate your help.

Many thanks in advance

#19

Hi Magtechpro,
Try using some web developer tools to find out how the web page works. Start from the HTML and CSS before looking into the JS dynamic effects, then have a go at replicating the functionality on your own. Push yourself to get as close as possible to what you want to achieve.

An alternative, shorter route could be to look for a plugin that does something like you see on that website, but I don't have any specific one to recommend. Perhaps you could try to adapt a full page content slider to something that approximates what you're after.

Good luck!

#20

Awesome tutorial! Well written, clear and straight forward.

Anyway, you may also want to add data attributes for the animation delay and duration. This way you you can easily control these values in the markup without re writing your css code.

Actually, I've had to do this before when customizing bxSlider for one of my projects. The techniques I used are practically the same as yours so adding this functionality to your carousel was pretty easy. You can check out the revised version on codepen.

You can also check out my version of bxSlider here

2 Likes
#21

Fantastic contribution, thank you for sharing!

#22

Great article antonella ! However, i've got some problem. The code worked just fine but i didn't get animation for the first slide since the it takes time to load the page. The rest of the things are fine. I tried the jquery document.ready( ) or window.load( ). But none of them worked for me. I know if i increase the delay for the first item then, it will be possible to get the animation to be seen. But, is there any other way or I'm missing something ?