Spicing Up the Bootstrap Carousel with CSS3 Animations

Thank you so much for your comment!

If you’re using the timer you shouldn’t encounter serious issues. I’ve tried with 5000, 6000 and up and it’s working fine. Perhaps you need to adjust the animation-delay property in the CSS. If I go lower than 4000 I’ll have to revise the value of the animation-delay property: as it stands, the entire animation of all three elements in the slider takes 3 seconds, therefore any value lower than this in the timer has a negative effect on the resulting animation.

What’s exactly not working on your end? Could you please post a link to your code?

Cheers!

Thank you thank u thank u thank u soooo much for your response antonella.

And Thank you so much for help me as you mention before in your comment your java script working fine in Firefox :slight_smile: Thank you so much

Thank you!!! So happy the script worked

1 Like

I am using your source files. No changes except commenting out the $myCarousel.carousel(‘pause’); line and adding the $myCarousel.carousel({interval: 4000 }); line. No other changes, but no difference in 4000 or any greater value.

Hi Mrgrnboro,
Thanks for getting back to me. What’s not working? The carousel is not sliding? The animations are not happening or are not synchronized?

As it stands, 4000 works well with all the other settings that control the working of the Carousel. If you change the seconds in the timer, you most likely have to adjust other values like the animation-delay property in the CSS and/or the interval property of the Carousel in the JS file. If you’d like to slow down the carousel try adjusting these values, perhaps even the transition property of the sliders. It depends on what you’re trying to achieve and experiment with different values.

Hi antonella,

I´m using gsap to animate the captions. Do you have any idea how can I reverse the animations before the next slide comes into view.

I´m trying that out with slide.bs.carousel custom event, but don´t know exactly where to put it in the code.

Any hint would be much appreciated.

Best regards, Pete

Hi again,

please have a look at this codepen for better understanding: http://codepen.io/anon/pen/pgowvM

Where would I put the reverse animations here?

Regards, Pete

Hello Antonella,

Another quick question. I looks like you have been so generous with your time. I have (http://www.webmentorshipsc.com) that has owl.carousel.min.js, animate.css, owl.carousel.css and other bootstrap files. I’m pleased with the custom data-animations such as bounceinup animations but for the life of me I cannot get the slider to auto play. I’ve edited the css, js and source code HTML with interval suggestions and still nothing. I’m at a loss. Can you help. If you’re ever in San Diego, I owe you a dinner and some beers! LOL!

Hi Marshall_Spevak,

Thank you for your comment (and the offer).

Are you using Bootstrap or Owl Carousel? On your website it seems to me you’re using the Bootstrap carousel. However, I can’t find any JS code to initialize the carousel. To have the carousel play on page load you need to either add data-ride="carousel" to the main carousel container div or initialize the component using JavaScript: $('#home-carousel').carousel();

If it doesn’t work, a good way to debug the problem is to isolate the component. Just copy and paste the bare-bone code needed for the carousel on CodePen and see if it works. You can share the URL here if you like so we can all look into it.

Cheers!

Yes, I am using both. Please see images for files used

I saw those files using developer tools.

I previewed main.js previously but couldn’t find the code to initialize the BS Carousel, although you’re using it on the page. Also, what I meant was that I didn’t see Owl Carousel on the actual webpage, although I saw the initialization code in main.js.

Did you try initializing the Bootstrap Carousel either using data-ride or the JS code the way I suggested above? If it doesn’t work, it’d be so much quicker to understand the problem if you isolate the component. I suggest using something like CodePen and pasting just the code needed for the BS Carousel to work, so if you can’t find what’s wrong with it, you can quickly share it here on the forum. It’s also easier for me to look at the code and test it without having to wade through lots of files.

Cheers!

OMG - worked perfectly - I added to this container code - div id=“home-carousel” class=“carousel slide” data-ride=“carousel” data-interval=“3000” I owe you dinner and beer. Thanks - Kinda of a cloudy day but you get the gist - https://portal.hdontap.com/s/embed/?stream=catamaran-ptz_eh-CUST

That’s a fantastic place!

I’m really glad the slider works (dinner sounds great: London - San Diego is a breeze) :smile:

Hey Antonella - Sure London to SD is easy. How about I fly there and we go to Khan’s in Bayswater. Went there many times last in London. Actually I have one more mystery I cannot solve. If you look at the site, webmentorshipsc.com when in phone responsive mode the menu expands but after click does not auto collaspe like another site I designed - leucadia-energy.com. Where do begin to attack this? Thanks.

Actually I figured it out! :slight_smile: added this to each link.
nav class=“collapse navigation navbar-collapse navbar-right” role=“navigation”

That’s great! I think for topics unrelated to the article it’s a good idea to open a new thread. Cheers :slight_smile:

1 Like

Hey Antonella,

Great stuff on this article! It had exactly what I was looking for.

I am writing to join the many that have a question for an experienced coder such as yourself.
I am currently doing FreeCodeCamp’s programming course, and there is a Tribute page challenge I must complete. Here is what I’ve created so far (please go easy on me I’ve only been coding for just over a month :slight_smile: )

As you can see in the CSS section, at the top, I’ve chosen 4 colors for my palette.
After altering some colors, when I decrease the browser window, the menu bar collapses but it is not viewable.
I’ve tried to look around for an answer but no luck.
Secondly, on my jumbotron containing the blockquote and the picture, I want the second part of the jumbotron (the picture) to go on top when the window size is decreased.
Any way around this?
I’m not in San Diego I actually just moved to London so I can definitely buy you a beer or two! lol
Cheers and thanks in advance.

Hi GBSimon,

Thanks for your comment, I’m glad you found the article useful. I’ve looked into your demo. To have the columns in the Jumbotron swap, you need to use BS .col-md-push-* and .col-md-pull-* classes. As for the navigation, you need to add a background-color to .navbar-toggle .icon-bar. Here’s a revised Pen: codepen.io/antonietta/pen/WxwQNb.

However, as I pointed out in the previous message, if you have queries that are unrelated to the article, please open a new thread. Cheers!

Hi Antonella,

I’m using this, and it works great for the first 3 cycles, then they stop resetting the animation and just are static. Any help?

Hi Dngretsch,

Could you please post a demo on something like CodePen. This will make it easier to debug. Cheers!