jQuery Fullscreen Slider (Touch, Drag, Scroll)

In this example below you will see how to do a jQuery Fullscreen Slider (Touch, Drag, Scroll) with some HTML / CSS and Javascript

With touch, mouse drag, mousewheel, keyboard support

Thumbnail
This awesome code was written by kyiv, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kyiv ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>jQuery Fullscreen Slider (Touch, Drag, Scroll)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="slider">
	<div class="slide active">
		<div class="bg"></div>
	</div>
	<div class="slide queue">
		<div class="bg"></div>
	</div>
	<div class="slide queue">
		<div class="bg"></div>
	</div>
	<div class="slide queue">
		<div class="bg"></div>
	</div>
	<div class="slide queue">
		<div class="bg"></div>
	</div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kyiv/jquery-fullscreen-slider-touch-drag-scroll-MKJQez */
html,
body,
.slider,
.slide,
.bg {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slider {
	background: #000;
}

.slide {
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate3d(0, 0, 0);
	transition: 800ms;
}

.bg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: 800ms;
}

.queue {
	transform: translate3d(0, 100%, 0);
}

.prev {
	transform: translate3d(0, -50%, 0);
}

.prev .bg {
	opacity: 0.5;
}

.bounce {
	transition: 300ms;
}

.slide:first-child.bounce {
	transform: translate3d(0, 10%, 0);
}

.slide:last-child.bounce {
	transform: translate3d(0, -10%, 0);
}

.slide:nth-child(1) .bg {
	background-image: url(https://static.pexels.com/photos/7463/pexels-photo-large.jpeg);
}

.slide:nth-child(2) .bg {
	background-image: url(https://static.pexels.com/photos/9632/pexels-photo-large.jpg);
}

.slide:nth-child(3) .bg {
	background-image: url(https://static.pexels.com/photos/21833/night-large.jpg);
}

.slide:nth-child(4) .bg {
	background-image: url(https://static.pexels.com/photos/6217/restaurant-coffee-cup-table-large.jpg);
}

.slide:nth-child(5) .bg {
	background-image: url(https://static.pexels.com/photos/14605/7fba86ef0995ddfffa23f5f3dfe35db9-large.jpg);
}

/*Downloaded from https://www.codeseek.co/kyiv/jquery-fullscreen-slider-touch-drag-scroll-MKJQez */
$(document).ready(function() {

	var timeStart = 0;

	function wheely(e) {
		var y = e.originalEvent.deltaY;
		var timeStop = new Date().getTime();
		var timeDiff = timeStop - timeStart;
		if (timeDiff > 200) {
			if (y > 0) {
				nextSlide();
			}
			if (y < 0) {
				prevSlide();
			}
		}
		timeStart = timeStop;
	}

	function prevSlide() {
		if ($('.active').is(':first-child')) {
			if (!$('.slider').hasClass('dragging')) {
				$('.slide:first-child').addClass('bounce');
				setTimeout(function() {
					$('.slide:first-child').removeClass('bounce');
				}, 300);
			}
		} else {
			$('.active').removeClass('active').addClass('queue').prev().removeClass('prev').addClass('active');
		}
	}

	function nextSlide() {
		if ($('.active').is(':last-child')) {
			if (!$('.slider').hasClass('dragging')) {
				$('.slide:last-child').addClass('bounce');
				setTimeout(function() {
					$('.slide:last-child').removeClass('bounce');
				}, 300);
			}
		} else {
			$('.active').removeClass('active').addClass('prev').next().removeClass('queue').addClass('active');
		}
	}

	function hotkeys(e) {
		if (e.keyCode == 38) {
			prevSlide();
		}

		if (e.keyCode == 40) {
			e.preventDefault();
			nextSlide();
		}
	}

	function dragStart(e) {
		e.preventDefault();
		if (e.type == 'touchstart') {
			$(document).off('mousedown', dragStart);
			startPoint = e.originalEvent.touches[0].pageY;
		} else {
			startPoint = e.pageY;
		}
		dragDist = 0;
		$(document).on('touchmove mousemove', dragMove);
	}

	function dragMove(e) {
		if (e.type == 'touchmove') {
			var movePoint = e.originalEvent.touches[0].pageY;
		} else {
			var movePoint = e.pageY;
		}
		dragDist = (movePoint - startPoint) / $('.slider').height() * 100;

		$('.slider').addClass('dragging');

		$('.slide, .bg').css({
			transition: '0ms'
		});

		if (dragDist < 0) {
			$('.active .bg').css({
				opacity: 1 + (dragDist / 200)
			});
			$('.active').css({
				transform: 'translate3d(0,' + (dragDist / 2) + '%,0)'
			}).next().css({
				transform: 'translate3d(0,' + (100 + dragDist) + '%,0)'
			});
		}

		if (dragDist > 0) {
			$('.active').css({
				transform: 'translate3d(0,' + dragDist + '%,0)'
			}).prev().css({
				animation: 'none',
				transform: 'translate3d(0,' + (-50 + dragDist / 2) + '%,0)'
			}).find('.bg').css({
				opacity: 0.5 + (dragDist / 200)
			});
		}
	}

	function dragEnd() {
		$(document).off('touchmove mousemove', dragMove);
		$('.slide, .bg').removeAttr('style');
		if (dragDist > 20) {
			prevSlide();
		}
		if (dragDist < -20) {
			nextSlide();
		}

		setTimeout(function() {
			$('.slider').removeClass('dragging');
		}, 800);
	}

	$(document).on('wheel', wheely);
	$(document).on('keydown', hotkeys);
	$(document).on('touchstart mousedown', dragStart);
	$(document).on('touchend mouseup', dragEnd);

});

Comments