I’ve adapted a carousel a little to use to present a number of links at the top of a page. It was adapted from the article ‘Keeping it simple: coding a carousel’ by Christian Heilmann. I the original code, the previous/next buttons are above the text being rotated. I’ve modified it to position the arrows either side of the text. Unfortunately, the text doesn’t remain between the arrows, and on each change, the text appears further down the page, until you get to the beginning again and it goes back to the top again.
I’ve put a pen together to show the problem. I’m fairly sure it’s an issue in the CSS, but I’ve not managed to pin it down. Any suggestions?
Here I come handing out a grain of salt (that’s so you can take my JS illiterate observations with a grain of salt).
Just offhand, the CSS seems to work. To me, it appears that the JS is malfunctioning. Turn OFF JS in your browser. All 4 lines of text appear. Comment out any of the lines of HTML and the remaining lines stack from the top down, as expected. The problem seems to be that the JS does not invoke {display:none} on the list items above the visible line, or perhaps apply a negative margin-top to the lines above the visible line, or apply position absolute to the visible line to forcibly move it to the top, or some such technique. It collapses (hides) the content of the list items, but not the list item itself (the li element).
I have not read the article by Christian Heillman. These are just my first impressions.
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.
