Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Hakim El Hattab.
<div class="counter"></div>
<button class="paginate left"><i></i><i></i></button>
<button class="paginate right"><i></i><i></i></button>
// basic paging logic to demo the buttons
var pr = document.querySelector( '.paginate.left' );
var pl = document.querySelector( '.paginate.right' );
pr.onclick = slide.bind( this, -1 );
pl.onclick = slide.bind( this, 1 );
var index = 0, total = 5;
function slide(offset) {
index = Math.min( Math.max( index + offset, 0 ), total - 1 );
document.querySelector( '.counter' ).innerHTML = ( index + 1 ) + ' / ' + total;
pr.setAttribute( 'data-state', index === 0 ? 'disabled' : '' );
pl.setAttribute( 'data-state', index === total - 1 ? 'disabled' : '' );
}
slide(0);
@import "compass";
$size: 50px;
$thickness: 5px;
$angle: 40deg;
$angleHover: 30deg;
$angleActive: 25deg;
@mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
i:first-child {
transform: translate( $x, $y ) rotate( $angle );
}
i:last-child {
transform: translate( $x, -$y ) rotate( -$angle );
}
}
body {
background: #33ab83;
}
button {
-webkit-appearance: none;
background: transparent;
border: 0;
}
.paginate {
position: relative;
margin: 10px;
width: $size;
height: $size;
cursor: pointer;
transform: translate3d(0,0,0); // fixes flicker in webkit
position: absolute;
top: 50%;
margin-top: -20px;
-webkit-filter: drop-shadow( 0 2px 0px rgba(0,0,0,0.2) );
i {
position: absolute;
top: 40%;
left: 0;
width: $size;
height: $thickness;
border-radius: $thickness / 2;
background: #fff;
transition: all 0.15s ease;
}
&.left {
right: 58%;
i {
transform-origin: 0% 50%
}
@include arrowTransform( $angle, 0, -1px );
&:hover {
@include arrowTransform( $angleHover, 0, -1px );
}
&:active {
@include arrowTransform( $angleActive, 1px, -1px );
}
&[data-state=disabled] {
@include arrowTransform( 0deg, -5px, 0 );
&:hover {
@include arrowTransform( 0deg, -5px, 0 );
}
}
}
&.right {
left: 58%;
i {
transform-origin: 100% 50%
}
@include arrowTransform( $angle, 0, 1px );
&:hover {
@include arrowTransform( $angleHover, 0, 1px );
}
&:active {
@include arrowTransform( $angleActive, 1px, 1px );
}
&[data-state=disabled] {
@include arrowTransform( 0deg, 5px, 0 );
&:hover {
@include arrowTransform( 0deg, 5px, 0 );
}
}
}
&[data-state=disabled] {
opacity: 0.3;
cursor: default;
}
}
.counter {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
margin-top: -15px;
font-size: 30px;
font-family: Helvetica, sans-serif;
text-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.2 );
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment