Spicing Up the Bootstrap Carousel with CSS3 Animations

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!

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/