Pure CSS pagination
A Pen by Brendan Mullins on CodePen.
<div class="content_detail__pagination cdp" actpage="1"> | |
<a href="#!-1" class="cdp_i">prev</a> | |
<a href="#!1" class="cdp_i">1</a> | |
<a href="#!2" class="cdp_i">2</a> | |
<a href="#!3" class="cdp_i">3</a> | |
<a href="#!4" class="cdp_i">4</a> | |
<a href="#!5" class="cdp_i">5</a> | |
<a href="#!6" class="cdp_i">6</a> | |
<a href="#!7" class="cdp_i">7</a> | |
<a href="#!8" class="cdp_i">8</a> | |
<a href="#!9" class="cdp_i">9</a> | |
<a href="#!10" class="cdp_i">10</a> | |
<a href="#!11" class="cdp_i">11</a> | |
<a href="#!12" class="cdp_i">12</a> | |
<a href="#!13" class="cdp_i">13</a> | |
<a href="#!14" class="cdp_i">14</a> | |
<a href="#!15" class="cdp_i">15</a> | |
<a href="#!16" class="cdp_i">16</a> | |
<a href="#!17" class="cdp_i">17</a> | |
<a href="#!18" class="cdp_i">18</a> | |
<a href="#!19" class="cdp_i">19</a> | |
<a href="#!+1" class="cdp_i">next</a> | |
</div> |
A Pen by Brendan Mullins on CodePen.
/* | |
this javascript is only to change the "actpage" attribut on the .cdp div | |
*/ | |
window.onload = function(){ | |
var paginationPage = parseInt($('.cdp').attr('actpage'), 10); | |
$('.cdp_i').on('click', function(){ | |
var go = $(this).attr('href').replace('#!', ''); | |
if (go === '+1') { | |
paginationPage++; | |
} else if (go === '-1') { | |
paginationPage--; | |
}else{ | |
paginationPage = parseInt(go, 10); | |
} | |
$('.cdp').attr('actpage', paginationPage); | |
}); | |
}; |
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
body { | |
background: #333; | |
font-family: sans-serif; | |
overflow: hidden; | |
} | |
@keyframes cdp-in { | |
from { | |
transform: scale(1.5); | |
opacity: 0; | |
} | |
to { | |
transform: scale(1); | |
opacity: 1; | |
} | |
} | |
.cdp { | |
position: relative; | |
text-align: center; | |
padding: 20px 0; | |
font-size: 0; | |
z-index: 6; | |
margin: 50px 0; | |
animation: cdp-in 500ms ease both; | |
animation-timeout: 200ms; | |
&_i { | |
font-size: 14px; | |
text-decoration: none; | |
transition: background 250ms; | |
display: inline-block; | |
text-transform: uppercase; | |
margin: 0 3px 6px; | |
height: 38px; | |
min-width: 38px; | |
border-radius: 38px; | |
border: 2px solid #fff; | |
line-height: 38px; | |
padding: 0; | |
color: #fff; | |
font-weight: 700; | |
letter-spacing: .03em; | |
display: none; | |
&:first-child, | |
&:last-child { | |
padding: 0 16px; | |
margin: 0 12px 6px; | |
} | |
&:last-child, | |
&:nth-child(2), | |
&:nth-last-child(2) { | |
display: inline-block; | |
} | |
} | |
&_i:hover { | |
background-color: #000; | |
color: #fff; | |
} | |
&:not([actpage="1"]) &_i:nth-child(1) { | |
display: inline-block; | |
} | |
} | |
@for $i from 1 through 80 { | |
.cdp[actpage="#{$i}"] { | |
// 3 before | |
.cdp_i:nth-child(#{$i - 2}):not(:first-child):not(:nth-child(2)) { | |
display: inline-block; | |
pointer-events: none; | |
color: transparent; | |
border-color: transparent; | |
width: 50px; | |
&:after { | |
content: '...'; | |
color: #fff; | |
font-size: 32px; | |
margin-left: -6px; | |
} | |
} | |
// 2 before | |
.cdp_i:nth-child(#{$i - 1}):not(:first-child) { | |
display: inline-block; | |
} | |
// before | |
.cdp_i:nth-child(#{$i}):not(:first-child) { | |
display: inline-block; | |
} | |
// active | |
.cdp_i:nth-child(#{$i + 1}) { | |
background-color: #000; | |
color: #fff; | |
display: inline-block; | |
+.cdp_i:last-child { | |
display: none !important; | |
} | |
} | |
// next | |
.cdp_i:nth-child(#{$i + 2}):not(:last-child) { | |
display: inline-block; | |
} | |
// 2 next | |
.cdp_i:nth-child(#{$i + 3}):not(:last-child) { | |
display: inline-block; | |
} | |
// 3 next | |
.cdp_i:nth-child(#{$i + 4}):not(:last-child):not(:nth-last-child(2)) { | |
display: inline-block; | |
pointer-events: none; | |
color: transparent; | |
border-color: transparent; | |
width: 50px; | |
&:after { | |
content: '...'; | |
color: #fff; | |
font-size: 32px; | |
margin-left: -6px; | |
} | |
} | |
} | |
} |