Slide effect flickers with SlidesJS

Question

I have a simple layout in which I have integrated a SlidesJS slider example. Now, the thing is, whenever it slides to an image, the animation flickers and it is buggy. It would translate the position perfectly, but right after being done, it goes back a little bit and comes back again, like trying to run but being pulled back at the right position.

I've uploaded a test case for you: http://test-ground.besaba.com/silmond/index.html

The inital examples, however, work perfectly. The only changed thing in my layout are the slider's sizes. I set the container's width to 56% and its height to 400px.

Do you have any idea why this happens?

Answer 1

Ah, nevermind. What caused the flickering was the intercalation of both css and javascript animations/transitions.

I had the terrible idea to set something like * { @include transition(all, 0.2s) } in my code. I was thinking that this would be simpler as I wouldn't have had to add this line everytime I wanted a smooth transition. But it turns out not to be.