Forked from David DeSandro's Pen Flickity.
A Pen by Captain Anonymous on CodePen.
Forked from David DeSandro's Pen Flickity.
A Pen by Captain Anonymous on CodePen.
<h1>Flickity - dragMove event with jQuery</h1> | |
<div class="gallery"> | |
<div class="progressbar"></div> | |
<div class="gallery-cell"></div> | |
<div class="gallery-cell"></div> | |
<div class="gallery-cell"></div> | |
<div class="gallery-cell"></div> | |
<div class="gallery-cell"></div> | |
</div> |
// external js: flickity.pkgd.js | |
$(document).ready( function() { | |
var $gallery = $('.gallery').flickity({ | |
cellAlign: 'center', | |
autoPlay: 4000, | |
wrapAround: true, | |
cellSelector: '.gallery-cell' | |
}); | |
$gallery.on( 'cellSelect', function() { | |
var el = $('.progressbar'); | |
var newone = el.clone(true); | |
el.before(newone); | |
$("." + el.attr("class") + ":last").remove(); | |
}) | |
}); |
/* external css: flickity.css */ | |
* { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { font-family: sans-serif; } | |
.gallery { | |
background: #FAFAFA; | |
position: relative; | |
} | |
.gallery-cell { | |
width: 66%; | |
height: 200px; | |
margin-right: 10px; | |
background: #8C8; | |
counter-increment: gallery-cell; | |
} | |
/* cell number */ | |
.gallery-cell:before { | |
display: block; | |
text-align: center; | |
content: counter(gallery-cell); | |
line-height: 200px; | |
font-size: 80px; | |
color: white; | |
} | |
.progressbar{ | |
height: 7px; | |
background-color: #fff; | |
border: 1px solid #7b1b1b; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
z-index: 2; | |
&::before{ | |
content: ''; | |
display: block; | |
height: 100%; | |
animation: progressBar 4s; | |
background-color: #7b1b1b; | |
} | |
} | |
@keyframes progressBar { | |
/* shine animation */ | |
0% {width: 0%;} | |
100%{width: 100%;} | |
} |