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:
- Include animate.min.css in the
section of your HTML document.
- 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 ofcarousel-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.
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