Spicing Up the Bootstrap Carousel with CSS3 Animations

By admin / 9:47 pm, 26 Jun 2016 / CSS, jQuery / 0 Comment

In this article, I’m going to show how to add some fun animation effects to the Bootstrap Carousel.

Here we are going to use Animate.css, by Dan Eden for required animations.
To speed up the process, grab a starter template from the Bootstrap website and add the necessary files.
Here’s the code for the Bootstrap Carousel:

As a first step in this direction, delete the data-ride=”carousel” attribute from the .carousel element. The data-ride attribute initializes the carousel without having to write any JavaScript code. However, we’re going to take control of the carousel using JavaScript, therefore the data-ride attribute won’t be necessary.

Adding CSS to the Carousel:-

The snippet above ensures that the elements start their animation sequentially.

Writing the jQuery
Let’s start by initializing the carousel. In your custom JavaScript file, add this code snippet:

We’ve set the carousel in motion. Next, we tackle the animation.
To animate the captions in the first slide, the script has to fire as soon as the page finishes loading in the browser. However, to animate subsequent slides as they come into view, our code will have to fire on the slide.bs.carousel event. This means that the same code will be used twice: on page load and on the slide.bs.carousel event.

Here’s the code:

Check out this demo:-

View Demo

Previous Post
Next Post