Flickity - dragMove event with jQuery

Flickity---dragMove-event-with-jQuery.markdown

Flickity - dragMove event with jQuery

Forked from David DeSandro's Pen Flickity.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<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>

script.js

// 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();
 })
});

style.scss

/* 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%;}
}