Make tranisition in images fade instead of slide?

Well, building on this and various other posts across the web (e.g. this), this is what I’ve managed to develop:

/*Make Carousel fade.  Delay between slides needs(?) to be > 7000ms for this to work well*/
.carousel-inner > .item {
-webkit-transition: 2s ease-in-out opacity;
-moz-transition: 2s ease-in-out opacity;
-ms-transition: 2s ease-in-out opacity;
-o-transition: 2s ease-in-out opacity;
transition: 2s ease-in-out opacity;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  opacity: 1;
  z-index: 1;
  left: 0;
}
.carousel-inner > .active.left {
  opacity: 0;
  z-index: 2;
  left: 0;
}
.carousel-inner > .active.right {
  opacity: 0;
  z-index: 2;
  left: 0;
}

You need to put this in a child theme, as the >s aren’t accepted in the Custom CSS panel.

Depending on the slide delay and the fade delay above, you may get lack of fading (image simply appears) and a few jitters. 2 seconds per fade and 7000ms delay between slides seems to work, as does 3 seconds per fade and 8000ms delay between slides.

@nikeo: another one for the FAQ?

Many thanks ElectricFeet… you’re a Champion!

@electricfeet Where do you insert this? I copied/pasted this into Appearance–>Editor and updated. But my images are still sliding. Is this the wrong place to insert this? If so, where? Thank you.

p.s. I do have a child theme.

[Please create your own thread to discuss your own issue]

Should be in your style.css in the child theme.

@rdellconsulting Does that mean that what I did was wrong? i.e. pasting into the Editor. Thanks.

Thank you, this worked really well.

Tried this and it doesn’t work for me. are you sure you didn’t omit anything? Could you show me a working example? For further reference, I tested this in Chrome 28.0.1500.95 m. I’m updating it as I write to the latest version, and I’ll let you know if it made a difference.

Later edit: your code does work if it’s added in the custom CSS area of the theme options panel. However, it doesn’t work from child theme style.css.

Very strange.

@acub, Could you post your efforts and issues in a new thread and refer back to this thread?

It works BECAUSE the >s are stripped away. The correct code is:

.carousel .item {
-webkit-transition: .7s ease-in-out opacity;
-moz-transition: .7s ease-in-out opacity;
-ms-transition: .7s ease-in-out opacity;
-o-transition: .7s ease-in-out opacity;
transition: .7s ease-in-out opacity;
}

.carousel .active.left, .carousel .active.right {
opacity: 0;
z-index: 2;
}

.carousel .next.left, .carousel .prev.right {
opacity: 1;
z-index: 1;
}

@andrew Nevins: Why would I open a new thread if I’m referring to a solution provided in this thread, which turns out to be a little bit misleading?

If the solution, that worked for the original poster of this thread, did not work for you then you are not experiencing the same problem.

& Why was the solution misleading?

Because it’s wrong.
It only works if it’s inserted in the themes’s options panel which strips away the >’s leaving the code as posted by me above. Also, the “left: 0;” lines are useless. The code works without them in IE, Chrome and FF. I don’t have other browsers installed here to test, but from my knowledge of CSS that line is useless for this effect.

ElectricFeet already mentioned this issue, “You need to put this in a child theme, as the >s aren’t accepted in the Custom CSS panel” within the same post that code solution was provided.

Andrew, with all due respect, please read what I wrote carefully. The code only works IF you put it in the Custom CSS panel, contrary to what EF said, because the >’s are stripped. The code with >’s, as posted above, is wrong. It doesn’t work if you put it in a child theme, as EF mentioned. Only works if you strip the >’s. Or if you put it in the custom CSS panel which strips them for you.

Am I making myself clear now?

Hi acub. Thanks for the corrections. I picked up the code from the links I posted above, but am still a noob, so happy to learn. However, having said that, the code does work for me at darioalfonsi.com Strange it didn’t work for you. I think the >s are still in my code (not easy for me to check on a phone right now).

Yes, the left: 0 didn’t seem to matter to me either, but I saw it in several links, so put it in–and it didn’t seem to break anything ??

Thanks for the informed input.

@ef: you’re welcome.
@killasonna: you need to paste the code I provided in the last textarea of the Appearance–>Customiz’it!, in backend, under: Custom CSS. You save and it works.

Also, the initial code works if it’s inputted there, as the >’s get stripped away.
If you do it in editor, in style.css, the >’s do not get stripped and it won’t work.
However, you may strip the >’s yourself or use my code and it will work from editor too. ??