Spicing Up the Bootstrap Carousel with CSS3 Animations

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:

Hi Antonella,

I implemented the bootstrap carousel as you described in my one-page website and it’s working fine.

I wanted to ask you, if you know if there is a possibility to use the buttons in the captions as a link. That is, I want to use the buttons as they were links of the navbar to get to the other pages of the website.

I tried it with the a href tag:

<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight"><a href="#about">About</a></button>

But this does not work. Is it possible that the a href tag collides with the CSS3 Animations?

Do you have any idea maybe?

Thanks a lot, Pete

Hi Pete,
Thanks for your comment. I haven’t tried this, but I think in principle it should work: the JS script doesn’t interact with the href attribute; it only gathers the animation data, adds the data as classes, and then removes those same classes.

I’m not too sure, however, about using the buttons inside the carousel as navigation. Navigation needs to be always accessible and an animated slider with animated buttons might not be ideal. But perhaps it works well for your design.

Could you please post a link to your project so it might be easier to help.

Cheers!

Hi,

thanks for your reply. Sorry that I cannot provide a link as I’m testing local.

What I want to achieve is the following:

When a user clicks on a menu item, I don’t want to carry him directly to the new page. Instead I want to make the respective slide be visible. There, the user gets the principal information about the item and from there he can go to the page digging into deeper information by clicking a button on that slide.

I achieved the first issue (changing the slide by clicking on the menu item) like so:

<li><a href="#carousel-example-generic" data-slide-to="1">About</a></li>

And this works fine.

But when I try to give the button on this slide - which brings the user to the “About” page - an a href, that doesn’t work.
It is strange as it is a simple anchor for the button, and as a button actually brings you to another information by using any kind of anchor anyway.

That’s why I asked if the code for the “spiced” carousel frustates the button functionality.

I’m using also the scrollspy functionality as the website has a one-page design. So maybe the problem lies there.

I know that my question isn’t really about “Spicing Up the Bootstrap Carousel with CSS3 Animations”-topic. But maybe you have an idea.

Thank you for the animations on the bootstrap carousel anyway.

Regards, Pete

Hello great job, we thank you for this.

I’ve been testing, because I wanted to integrate it into Joomla. by:

$document->addScript('assets/animate-caroudel.js);
$documnet->addStylesheet('asstes/animate-carousel.css);

This sends the files to the <head> of the page and not working.

but when I hit the js code in the php file if it works.
tabmbien works if the file named after the HTML code.

there any way to make this work by sending it to <head>

(Asking out of school) Are the quote marks correct in the above snippit? They seem unbalanced.