• 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
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91

	$slides = $('.slide')
			$slidesParent = $('#slides')
			var pxToSlide, index = 0
			$('#videoslides').css({width: (window.innerWidth * 3) + 'px'})
			$('#slider-dots').css({width: window.innerWidth + 'px'})

			$slides.css({width: window.innerWidth+'px'})
			$('a.nav-arrow:last-of-type').css({
				// i dont know why, this in mobile there's a still a space to the right :()
				left: (window.innerWidth - 65) + 'px'
			})

			// Adjusts width of some elements on browser resize
			window.addEventListener('resize', function() {
				// slides margin-left - width of a slide
				// easy way out for now - just reset slider
				$('#slides').css({'margin-left': '0px'}); index = 0

				$slides.css({width: window.innerWidth+'px'});
				$('a.nav-arrow:last-of-type').css({
					left: (window.innerWidth - 65) + 'px'
				})

				$('#slider-dots').css({width: window.innerWidth + 'px'})
			})


			// When < and > are clicked
			$('#videoslides a.nav-arrow').click(function(e) {
				e.preventDefault()

				var direction = $(this).data('direction') == 'next' ? 'next' : 'previous'
				var oldIndex = index

				if (direction == 'next') {
					// if there are no next slides (we're on the last index)
					// next slide becomes the first (index 0)
					if (index + 1 > $slides.length-1) {
						index = 0
					} else {
						index = index + 1
					}
				} else {
					// If there's no previous slide (we are on index 0),
					// the next slide becomes the last
					if (index <= 0) {
						index = $slides.length - 1 // minus one since $slides.length starts count at 1
					} else {
						index = index - 1
					}
				}
				slideTo(oldIndex, index)
			})


			// When the slider navigation circles are clicked
			$('#slider-dots a').click(function(e) {
				e.preventDefault()
				var from = $(this).parent().find('.current-slide').index()
				var to = $(this).index()
				slideTo(from , to)
			})

			function slideTo(oldIndex, newIndex) {
				var diff,  operator

				if (oldIndex < newIndex) {
					// next slide
					diff = newIndex - oldIndex
					pxToSlide = diff * window.innerWidth
					operator = '-='
				} else {
					// prev slide
					diff = oldIndex - newIndex
					pxToSlide = diff * window.innerWidth
					operator = '+='
				}

				$slidesParent.animate({
					'margin-left': operator + pxToSlide
				}, 1000, function() {

				})
					// Activate corresponding dot
					$('#slider-dots')
						.find('.current-slide')
						.removeClass('current-slide')
						.end()
						.find('a').eq(newIndex)
						.addClass('current-slide')
			}