• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

var $slides = $('.slide')

// this is a fluid width slider. Determine the width (page width)
$slides.css({ width: window.innerWidth + 'px'}) 

// We start at 0
var oldIndex = 0, index = 0

$('a').click(function(e) {
	e.preventDefault()
  
  var direction = $(this).data('direction')
 
  if (direction == 'next') {  
  	// is there a next slide? if not, slide to 0
    index = index + 1 > $slides.length - 1 ? 0 : index + 1       
  } 
  
   if (direction == 'prev') {  
  	// is there a previous slide? if not, slide to last
    index = index <= 0 ? $slides.length - 1 : index - 1       
  }  
  
  slideTo(index)  
})


function slideTo(newIndex) {
	var diff, operator, pxToSlide
  console.log(oldIndex, '  ', newIndex)
  if (oldIndex < newIndex) {
  	diff = newIndex - oldIndex  	
    operator = '-='
  }
  
  if (oldIndex > newIndex) {
  	diff = oldIndex - newIndex
    operator = '+='
  }
  
  pxToSlide = diff * window.innerWidth
  $slides.parent().animate({
  	'margin-left' : operator + pxToSlide
  }, 1000)
  
  oldIndex = newIndex
}