CSS only paging with transition/transformation

Question

Is there a way to implement something like this using CSS only (except for the button click handlers)?

Consider a paging panel:

<< < 1 2 3 4 5 > >>

When clicking the right > Button, I want to slide the entries 1 to 5 to the left "behind" the << < buttons and also 6 7 8 9 10 should slide in from the right (starting from "behind" the > >> buttons).

The result then should be << < 6 7 8 9 10 > >>

Same should work in the other direction.

Answer 1

General idea

The solution is to layout the page-links in one horizontal line. One way to achieve this is to put them in a list, set display:inline on the <li> s and white-space:nowrap on the <ul> .

Next you have to make sure that all but the first 5 links are hidden. This can be achieved by setting a fixed width in conjunction with text-overflow:clip and overflow:hidden . I have to admit, I eyeballed the value for the width.

The scrolling effect can be achieved by setting some attribute via javascript and in CSS use transform: translateX() and transition: translateX if the attribute has been set.

The code

Tested only with Chrome, I don't give any promise this code will work with any other browser

 var pages = document.getElementById("pages") var scroll = Number(pages.dataset.scroll); function scrollLeft() { scroll += 1; pages.dataset.scroll = scroll; } function scrollRight() { scroll -= 1; pages.dataset.scroll = scroll; } 

 .pager a { display: inline-block; background-color: #aaa; color: #fff; width: 2em; text-align: center; padding: .5em 0; text-decoration: none; margin: 0 .25em; } .pager ul { list-style-type: none; margin: 0; padding: 0; float: left; } .pager ul li { display: inline; } #pages { width: 13.75em; white-space: nowrap; overflow: hidden; text-overflow: clip; float: left; } #pages ul { transition: transform .5s ease; } #pages[data-scroll='1'] ul { transform: translateX(-13.75em); } 

 <div class="pager"> <ul class="prev-links"> <li><a href="#">&lt;&lt;</a></li> <li><a href="javascript:scrollRight();">&lt;</a></li> </ul> <div id="pages" data-scroll="0"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul> </div> <ul class="next-links"> <li><a href="javascript:scrollLeft();">&gt;</a></li> <li><a href="#">&gt;&gt;</a></li> </ul> </div> 

Room for improvement

This code does not check any bounds. So each click on < or > will change the variable scroll whether it makes sense or not.

For each step, you will have to include a new directive, so if you have 3 steps (ie more than 10 pages), you will have to add

#pages[data-scroll='2'] ul {
  transform: translateX(-27.5em);
}

and so on.

The links for << and >> don't work, especially the latter is going to be a bit tricky (and might be impossible, if you don't know in advance, how many pages there are.

In general, to get this fully working, there will be a lot of hardcoding stuff.

As requested, this is the solution with the least JS I could think of, but to be honest, if you're using JS for the click-handlers anyway (and you have to because this can't be done without it), it would be way better to implement a few calculation and sanity-checks in javascript instead of looking for an almost-CSS-only solution.