Spicing Up the Bootstrap Carousel with CSS3 Animations

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.

Great!

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:

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

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

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

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.

many thanks in advance

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.

Thank you so much!

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 :slight_smile:

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

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!

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

Fantastic contribution, thank you for sharing!

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 ?

Hi juwelkhan,
Unless you have a specific concern about it, increasing the delay seems a good idea, of course I take for granted that you’re doing your best to get your page to load reasonably fast. Also, have a look at this post, you might find something that works for you:

Admittedly, it’s a bit old but the suggestions can still be valid.

1 Like

Thank you antonella for your quick answer. I appreciate your help. I’ll surely have a look at css-tricks article !

I’ve faked the slower loading speed by adding a timer, and came up with something like this, perhaps it works for you:

$(window).load(function() {
    setTimeout(function(){
     loaded = true;
     if(loaded) {
        $caption.fadeIn();
        
        //Initialize carousel 
        $myCarousel.carousel();
        
        //Animate captions in first slide on page load 
       doAnimations($firstAnimatingElems);
    
       //Pause carousel  
       $myCarousel.carousel('pause');
     }
   },3000);
});

The loaded variable would be declared before the .load() method and set to false. The $caption variable, where the first caption in the slider is stored, is also declared at the top before the .load() method as

$caption = $myCarousel.find('.carousel-caption:first');

and hidden using jQuery .hide(). Once the page finishes loading, the loaded flag is set to true, and only then the caption is made visible and the animation code is triggered. I haven’t tried this on a live server, but you could see if it works for you.

If it doesn’t, you could post a link to your site, so it’ll be easier for everybody on this forum to contribute an answer.

Cheers!

hi antonella, i’m highly impressed on your approach to help. :smile:

Your previous code was fine to work with $(window).load( ) . Its me, who mixed the code with some other things. I was trying to randomize the slide. so, i tried some thing like this.

var slideNum = $(‘#my-carousel .item’).length;
var randSlide = Math.floor( Math.random()*slideNum);
$(‘#my-carousel .item’).eq(randSlide).addClass(‘active’);

this code conflicted with your code which was initialized with the ‘.item:first’. Randomly when the randSlide value was first, i got the animation for the first slide. So, when i stopped randomization, everything worked fine.

Later i tried to customized your code something like this. but it didn’t worked.

var $myCarousel = $(‘#my-carousel’),
$firstAnimatingElems = $myCarousel.eq(randSlide).find(“[data-animation ^= ‘animated’]”);

What can I say, I’m a believer in the community spirit, and the developers’ community is awesome!