<div class="text">
<h1>Pagination style with ellipsis</h1>
<p><strong>This Pen shows only the state or pagination. Here is no pagination implemented. You can use your own pagination and use this script to add ellipsis on your pagination. You will se the First and last selector and the page selector for the one before or after the selected page.</strong></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="pagination">
<ul>
<li class="first"><a href="#" class="link">« Anfang</a></li>
<li class="previous"><a href="#" class="previous">Zurück</a></li>
<li><a href="#" class="link">1</a></li>
<li><a href="#" class="link">2</a></li>
<li class="active"><a href="#" class="active link">3</a></li>
<li><a href="#" class="link">4</a></li>
<li><a href="#" class="link">5</a></li>
<li><a href="#" class="link">6</a></li>
<li><a href="#" class="link">7</a></li>
<li><a href="#" class="link">8</a></li>
<li><a href="#" class="link">9</a></li>
<li class="next"><a href="#" class="next">Vorwärts</a></li>
<li class="last"><a href="#" class="last">Ende »</a></li>
</ul>
</div>
body {
font-family: sans-serif;
font-size: 1rem;
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.pagination {
width: 100%;
text-align: center;
margin: 0 0 rem-calc(8);
padding-top: 2rem;
}
.pagination p {
display: none;
}
.pagination ul {
list-style-type: none !important;
margin: 0;
padding: 0;
}
.pagination ul li {
display: inline-block;
text-align: center;
overflow: hidden;
margin: 0 3px;
}
.pagination ul li a, .pagination ul li span {
background: black;
font-size: 16px;
font-weight: 400;
line-height: 2.5;
color: white;
text-decoration: none;
width: 40px;
height: 40px;
border-radius: 100%;
display: block;
transition: background 300ms ease;
}
.pagination ul li a:hover, .pagination ul li span:hover, .pagination ul li a.active, .pagination ul li span.active {
background: skyblue;
}
.pagination ul li.previous, .pagination ul li.next {
display: none;
}
.pagination ul li.first, .pagination ul li.last {
position: relative;
background: none;
}
.pagination ul li.first a, .pagination ul li.last a {
color: transparent;
font-size: 0;
background: none;
transition: opacity 300ms ease;
}
.pagination ul li.first a:before, .pagination ul li.last a:before {
content: '^';
display: block;
font-size: 2rem;
transform: rotate(-90deg);
color: black;
position: absolute;
top: -20px;
left: 8px;
}
.pagination ul li.first a:hover, .pagination ul li.last a:hover {
opacity: 0.5;
}
.pagination ul li.last a:before {
transform: rotate(90deg);
left: 10px;
}
.pagination ul li.ellipse strong {
background: none;
color: black;
}
/**
* Add ellipsis on pagination script by Hakan Havutcuoglu
* http://www.havutcuoglu.com/ or http://www.havutcuoglu.de/
* This notice MUST stay intact in JS files and SCRIPT tags for free and legal usege.
*/
function changePaginationLenght()
{
$('.pagination .active').closest('li').addClass('active');
var pagi = $('.pagination li'),
pagiFirst = $('.pagination li.first'),
pagiLast = $('.pagination li.last'),
pagiActive = $('.pagination li.active'),
maxPagiLength = pagi.length,
count = 0;
pagi.each(function()
{
count++;
$(this).hide();
pagiFirst.show();
pagiLast.show();
pagiActive.show();
if(count == pagi.index(pagiActive) || count == pagi.index(pagiActive) + 2)
{
$(this).show();
}
if(count == pagi.index(pagiActive) - 1)
{
pagiFirst.after('...');
}
if(count == pagi.index(pagiActive) + 2)
{
pagiLast.before('...');
}
});
}
$(document).ready(function(){
changePaginationLenght();
});