Touch Slider (Part 2)

index.haml

.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

script.js

var sliderEl = document.querySelector( '.slider' ); // NEW: our element
var slideCount = 3; // NEW: the total # of slides
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; // NEW: our % calc
  sliderEl.style.transform = 'translateX( ' + percentage + '% )'; // NEW: our CSS transform
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.min.js"></script>

style.sass

$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
  width: 100% * $sliderCards
 
.slider-panel
  padding-top: 10%
  width: 100%

.has-slider
  overflow: hidden
  width: 100%

.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

touch-slider-part-2.markdown

Touch Slider (Part 2)

A Pen by Drew Powers on CodePen.

License.