.has-slider
  .slider#slider
    .slider-panel{ style: 'background-color: #faaf34; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/65d721_4dfa47a05152487fb3bc45ca2ec8fd1e.png)' }
    .slider-panel{ style: 'background-color: #aca680; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/65d721_761db9a0c113407f924a824ed173ed26.png)' }
    .slider-panel{ style: 'background-color: #d8daa6; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/tumblr_njkn6kp0kE1qgsw73o1_500.png)' }

.colophon
  Artwork ©
  %a{ href: 'https://sachinteng.tumblr.com/' } Sachin Teng

$sliderCards: 3

*
  background-position: center center
  background-repeat: no-repeat
  background-size: auto 100%

body
  background-color: black
  font-family: sans-serif
  margin: 0
  padding: 0

.slider
  display: flex
  transition: transform 400ms cubic-bezier( 0.5, 0, 0.5, 1 )
  width: 100% * $sliderCards
 
.slider-panel
  padding-top: 10%
  width: 100%

.has-slider
  overflow: hidden
  width: 100%
  &::after
    animation: flash 1s infinite
    color: red
    content: "SLUG MODE"
    font: 700 48px/1 sans-serif
    left: 50%
    pointer-events: none
    position: absolute
    top: 50%
    transform: translate( -50%, -50% )

.colophon
  color: #808080
  padding-bottom: 1em
  padding-top: 1em
  text-align: center
  
a
  color: white
  font-size: 14px
  letter-spacing: 0.125em
  text-decoration: none
  text-transform: uppercase

@keyframes flash
  50%
    opacity: 0

var sliderEl = document.querySelector( '.slider' );
var slideCount = 3;
var activeSlide = 0; // NEW: the current slide # (0 = first)
var sliderManager = new Hammer.Manager( sliderEl );
sliderManager.add( new Hammer.Pan({ threshold: 0, pointers: 0 }) );
sliderManager.on( 'pan', function( e ) {
  var percentage = 100 / slideCount * e.deltaX / window.innerWidth;
  var transformPercentage = percentage - 100 / slideCount * activeSlide; // NEW
  sliderEl.style.transform = 'translateX( ' + transformPercentage + '% )';
  if( e.isFinal ) { // NEW: this only runs on event end
    if( percentage < 0 )
      goToSlide( activeSlide + 1 );
    else if( percentage > 0 )
      goToSlide( activeSlide - 1 );
    else
      goToSlide( activeSlide );
  }
});

// NEW: function that changes the slide
var goToSlide = function( number ) {
  if( number < 0 )
    activeSlide = 0;
  else if( number > slideCount - 1 )
    activeSlide = slideCount - 1
  else
    activeSlide = number;

 var percentage = -( 100 / slideCount ) * activeSlide;
 sliderEl.style.transform = 'translateX( ' + percentage + '% )';
};