Spicing Up the Bootstrap Carousel with CSS3 Animations

HTML & CSS
39

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