Flickity

by Ken Watanabe

HTML

<script src="http://flickity.metafizzy.co/flickity.pkgd.js"></script>
<div class="gallery">
  <div class="gallery-cell"><div id class="copy">
  test
  </div></div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
</div>

<ol class="gallery-nav">
  <li class="is-selected">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

CSS

@import url(http://flickity.metafizzy.co/flickity.css);
* {
  box-sizing: border-box;
}

#copy {z-index:10000000; display:block;position:fixed; top:10px;left:10px;font-size:100px;color:red;}

body {
  font-family: sans-serif;
}

.gallery {
  background: #FAFAFA;
  margin-bottom: 30px;
  counter-reset: gallery-cell;
}

.gallery-cell {
  width: 100%;
  height: 160px;
  margin-right: 20px;
  background: #8C8;
  counter-increment: gallery-cell;
}

.gallery-cell:before {
  content: counter(gallery-cell);
  display: block;
  text-align: center;
  line-height: 160px;
  font-size: 80px;
  font-weight: bold;
  color: white;
}

.gallery-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-nav li {
  display: inline-block;
  font-size: 20px;
  color: #09F;
  border: 1px solid;
  padding: 10px;
  margin-right: 5px;
}

.gallery-nav li.is-selected {
  background: #09F;
  color: white;
}

.gallery-nav li:hover {
  background: #ADF;
  cursor: pointer;
}

JavaScript

$( function() {
	var $("copy").css("z-index","10000");
  
  var $gallery = $('.gallery').flickity({
    pageDots: false
  });

  var flickity = $gallery.data('flickity');
  
  var $galleryNav = $('.gallery-nav');
  var $galleryNavItems = $galleryNav.find('li');
  
  // NOTE: select event will change to cellSelect in Flickity v0.2.0
  %
  $gallery.on( 'select', function() {
    $galleryNav.find('.is-selected').removeClass('is-selected');
    $galleryNavItems.eq( flickity.selectedIndex ).addClass('is-selected');
  });
  
  $galleryNav.on( 'click', 'li', function() {
    var index = $(this).index();
    $gallery.flickity( 'select', index );
  });
  
});