Make tranisition in images fade instead of slide?

@electricfeet: You’re also a Legend! Thank you, it now works just like a bought one!

@russwilley

Your fading slider works fine on my screen, ElectricFeet, although I think arrows look a bit odd with fading transition.

You can remove the arrows using:

.carousel-control {
display:none;
}

BTW thanks for the code @electricfeet I really like the fade.

@killasonna: sorry for the late reply, i was in a small vacation.

Debugging your issue should be done like this:
Create a test sub-domain. Clean install WP and Customizr and input content just enough for the slider to work. Test the code and see if it fades nicely. If it works, start adding the mods/scripts/plugins you have on your live website. After each one check the slider until you find the culprit.

If it’s the last one you add, it’s all Murphy’s mother fault.

@acub That’s sounds like a very logical approach. I’ll give it a whirl when I return from my short vacation. Thanks again for all your help.

On further testing and using this code, I have noticed that the information I have provided above is not 100% correct. The “left: 0;” is necessary for the fading effect to work, and also, the syntax of the transition property is not right, according to W3C. Correct code for the transition shorthand is: property duration timing-function delay. This might matter in some versions of some browsers. Also, apart from Safari, all other browsers are offering support for transition property, so the -moz, -ms and -o are not needed.

The correct code, working on all devices in all browsers (afaik) is:

.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.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;
}

@Killasona: please try this new code, it might solve your problem, in which case it was a CSS syntax error, and not a js interference from some plugin. Change the duration and transition-function to your liking (for example, i’m using 1.2s duration and ease effect).

Which is the code I gave in the first place ??

My code also gives the transition effect for other browsers too. So the full code is:

/*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;
}

To new users reading this thread: since we started discussing whether the “>” is allowed in Custom CSS or not, Nikeo has enabled its use there. So you can now post this in the Custom CSS panel of Cutomiz’it!

Yes, that’s the code you posted initially. At that time it didn’t work if posted in the custom CSS panel. That’s why I intervened in the first place. What I really don’t understand is why you chose to post it again, with the same mistakes, after I pinpointed them.

You have 3 lines of unnecessary code and 2 syntax warnings in that code. Read my previous post for details.

Besides, the min 7000ms comment is incorrect. The effect is working fine at 5000ms, with a transition of 1200ms, at least with the correct syntax. Actually, the syntax warnings might be the reason why you experience problems under 7000ms.

Have to say that I had problems with @acub’s latest code – introduced some jerkiness into the transitions. Gone back to @efs code and it seems to work OK now. (Firefox 23.0.1)

Also have a 1px move to the left before each fade, though may be something else in my CSS doing that.

Thank you acub! This was easy to implement and works like a champ.