How to implement pagination as "horizontal scroll navigation bar"?
I am trying to create a bottom aligned navbar containing "prev" and "next" buttons to navigate through a list of links, something similar to what you see at the bottom of a long forum thread.
The number of links will vary across different sections of the site and I would like to be able to capture the number of links (6 + prev + next buttons) displayed at any given time. More than 6 links will always be displayed (minimum 15).
This is what I want to achieve:
There isn't much HTML out there, and I don't have any other code (other than some aesthetic styles that aren't really relevant). I'm happy to use any combination of CSS and JavaScript that could make this work.
My HTML looks like this:
<div class="bottom_nav page_width">
<ul>
<li><a href="#"><i class="icon-chevron-left icon-large"></i></a></li>
<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>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#"><i class="icon-chevron-right icon-large"></i></a></li>
</ul>
</div>
source to share
First, you can use the CSS property white-space:nowrap;
to align all links on one line.
This will allow the use of a horizontal scrollbar which you can hide with overflow: hidden;
Now you can use a JavaScript function that can scroll the content div
or ul
. It could be scrollBy(x, y)
.
This is how you can achieve what you want as I understood your question. If not, please explain with images or better description.
source to share