Spicing Up the Bootstrap Carousel with CSS3 Animations

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!!

That’s all right. Sorry I didn’t notice the missing url() keyword before, and thanks Mittineague for pointing that out. Now just position the background image so that it’s visible. I’ve updated the demo to show this, although you could also use the short background property syntax. Good luck with your project!

Hi antonella
Can you help me that how can I do carousel auto?

Hi Antonella,

This is a great article! Just what I’m looking for… I tried your code bare basic line by line but the animation does not work. It seems like demo.js is not even run at all.

What do I miss?

Hi, suencien. Welcome to the forums.

Have you read this thread to see if the problem you are having is similar to any of the problems experienced by other prosters? You might want to look at their CodePen’s for working examples that might help you solve your problem, too.

Hi Ronpat,

I found out that it actually works on Chrome and Firefox but not on IE11 and Edge. Does anyone have the same issue?

Hi Suencien,

@suencien, I’ ve tried the code and it seems to work on IE browsers. Could you please post a pen with your demo so we can try to find out what’s going on? Cheers!

I think you meant to address @suencien not Ron :slight_smile:

2 Likes

Yeah @PaulOB , sorry :smile:

1 Like

Hi Antonell,

After a few refreshes, it suddenly works on IE and Chrome, but unfortunately it still does not work on Safari. The images rotate but without animation…

I assume you mean Safari on a Mac as the windows version was dropped years ago and should not be used?

2 posts were split to a new topic: Adding effect to website