Spicing Up the Bootstrap Carousel with CSS3 Animations

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!

I can send you a link to the dev environment, but don’t want it public. Can you private email me? Thanks!

That would mean digging into your entire project to find out what’s causing the problem.

Rather, I’d like to see the carousel in isolation so that it becomes easier to single out the bug relating to this specific component. You can do so by replicating just the carousel-related code to something like CodePen and see if you’re getting the same bug. If you are, I can look at it and hopefully make a helpful suggestion. If you’re not, then something else on your project is interfering with the carousel and you can start switching other scripts off to find out what’s causing the issue.

1 Like

A post was split to a new topic: Please recommend JavaScript books or tutorials

Thanks a lot antonella for nice sharing. Hats off

1 Like

Hi Antonella!

I am having trouble trying to change de background color for an image.

I try on each class on the css, but id does not work. Can you help me with this please?

Thanks!

Hernan

Hi Hernan,

I’m not sure I understand the problem: do you mean changing the background color of a slide inside the carousel? Could you please post a link to the page where the problem is? Cheers!

Hi antonella, thanks for the fast answer!

What i ment is that i want to add a backgound image to a slide intead of the backroung color, but i can ´t figure it out. For example, i tried i tryed changing this line on the css file

.skyblue {
background-image: “img/image.png”;
}

but it does not work.

I am going in the right direction?

Thanks again!

Hernan

Hi Anotonella,
It´s me again.
I could´t get it working.

Here is a code pen so you han help me see what i did wrong.


For the example i used the same code you did.

Do i need to use specific image sizes?

Thanks in advance!

It might help if you used the correct syntax. i.e. not

background-image: "https://a.wattpad.com/useravatar/Edu-pikachu.128.689397.jpg";

but

background-image: url("https://a.wattpad.com/useravatar/Edu-pikachu.128.689397.jpg");

2 Likes

Yeap. Thanks for that.

But even with the correct sintax it still does not work :frowning:

I’ve forked your pen and it seems to be working:

http://codepen.io/antonietta/pen/PzyymZ

1 Like

Thanks both of you for all the help!

I will keep on with that :slight_smile:

And again, Thanks!!