- I have 15 items in a list
- I have 10 such lists
- Each list SHOULD OCCUPY at most 1 row on the page
- Overflow items should be navigated via “NEXT” or “PREV” button.
- For displaying items in each list, I “float:left”.
- But then the overflow items wrap to next row.
For now, I am doing a hack for my laptop screen size:
- I .hide() all items at window load for each list
- Then .show() first 4 items for each list
- I have configured next and prev buttons accordingly.
I am positive this is wrong. But it enabled me to see how the look and feel is of what I wanted to do.
Please suggest me the correct approach. All major websites handle this. This is very common problem. I am just ignorant for now.
I think I solved the problem by another SO response:
How to move first child to the end?
Thanks for all your help