The problem is that you have removed the positioning from the list items and therefore they are just in the flow of the page one on top of each other. If you remove the opacity:0 and transform rule from the list item in the web inspector you will see that the items are stacked vertically by default. All your css and js then does is to hide and show each item which then just appears in its default (in-flow) position.
In the article successive list items are placed absolutely outside the container (top:200px) and then just moved inside (top:30px) when they are made visible.
You need to revert back to the original code and more or less keep it the same except to place the left and right buttons absolutely into the place you want them (you may need to pad out the container to make room for them).
I'm away today so this is very rough but should give you the idea.
There's magic numbers in there that could be avoided. It does depend on what you plan for this though as you are limited by the heights that you need to set to make this work.