Spicing Up the Bootstrap Carousel with CSS3 Animations

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!

Hi ,

Thanks very much of your help I tried my best and accomplished very nice effects there is one more problem with carousel I am using mousewheel plugin to control carousel next and prev it works fine.

I want to stop mousewheel event when I am on last slide I can do with unmousewheel() function but problem is now totally mousewheel stop I can’t go next or prev I want to stop only down direction and want to keep the up direction and same thing on first slide stop the up direction and keep down direction with carousel.

There is demo what I want I hope it makes more sense.
http://www.jqueryscript.net/demo/Responsive-jQuery-Layout-Carousel-Slider-Plugin-RadiantScroller/

My demo is here.

https://www.professionalsurgical.com/demo/index5.html#

I will really appreciate of your help I am totally stuck here.

Many Thanks

Great article and well written tutorial indeed, Thank you very much @antonella It works great but actually i used @arnique technique (Thanks to him) which fixed the animation delay issue. I’d recommend to add these attributes in your code.

I’ll apply your code (with credit) into my new WordPress theme once finished :smile:

Here’s my dev server http://full.radixtheme.com/

Again, Thank you!

Hi Antonella,

Great tutorial. I have downloaded the source file and I am implementing the slider in my website.
I just wanted to how can I set a background image to each slider? And also the slides don’t change automatically. Can this be changed once the page is loaded?

Thanks again. :smile:

Hi Rupesh,
Thanks for your comment!

The demo uses a background color for each slide, you can easily change that into a background image by adding the appropriate CSS rules to the .item class.

The carousel slides don’t slide automatically by design. I thought of leaving control to the user. If you don’t want this, remove the following JS line of code:

$myCarousel.carousel('pause');
1 Like

Hi Antonella,

Thank you very much for your quick response. :slight_smile: Your code works like a charm. :thumbsup: :ok_hand:

Hi Antonella,
Thanks for your great post. It is very helpful. I have hard time to turn this carousel to be image responsive in a smart-phone setting with smaller width when each item is indeed a picture. I did use image responsive class, however as the browser width getting smaller, the bottom part becomes the just caption without the image.
For example, I included image and change the font-size here while everything else remains intact. Please advise. Thanks.

Hi Love_Life,
Thanks for your kind comment. If you post a link to the page where the problem is perhaps I could be of more help.

Cheers!

Good day Antonella, may I ask what to edit to make the changing of the slider a bit slower. I already remove the $myCarousel.carousel(‘pause’);

Thanks in advance.

Hi Bernard, good day to you too. Try with this bit of CSS:

.carousel-inner > .item {
    transition-duration: 1s;
}

Replace 1s with your chosen duration.
Best!

Good day again Antenella. I have a question again. I’ve been using the animations for the entrance of the elements of my slider. My question is, is there a way i can animate the changing of slider into fadeOut?
So what I’m trying to achieve is once all the elements of the slide has been loaded they will ALL fadeout then the next slide will show.

Hopefully you can help me again with this one. Thanks :smile:
*** Here’s the link of the website I’m working if you want to check http://beduyadental.mtdwebsolutions.com/

Hi Bernard,
I like what you’ve done on the website slider. One way you can hide all slider elements could be by changing the doAnimations() function like this:

function doAnimations( elems ) {
        //Cache the animationend event in a variable
        var animEndEv = 'webkitAnimationEnd animationend';
        
        elems.each(function () {
            var $this = $(this),
                $animationType = $this.data('animation');
            $this.fadeIn().addClass($animationType).one(animEndEv, function () {
                $this.removeClass($animationType);
                elems.delay(3500).fadeOut();
            });
        });
    } 

I’ve set the timing inside the elems.delay() jQuery function to 3500, but you can tweak it until it fits with your design.

I hope this helps :slight_smile:

1 Like

Wow Antonella that was really fast…
thanks again for your help :blush:
have a great day

1 Like

Happy it helped!

Hello again Antonella, I’ve tried to apply the code but I think it is not working. The slides are still change and not using the fadeOut effect.

Hi Bernard,
I’ve visited your site but the slider seems broken. The slides are stuck. Did you change anything since yesterday?

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: