Слайдер для touch-устройств, как реализовать функцию touch?

Question

Vitellus Vitellus @vitellus

Рубаха-парень

Слайдер для touch-устройств, как реализовать функцию touch?

Допустим есть слайдер:

$(document).ready(function() {
	$('.slider__controls-button').on('click', function(e) {
		e.preventDefault();

		var $this = $(this),
			container = $this.closest('.slider'),
			list = container.find('.slider__list'),
			items = container.find('.slider__item'),
			activeSlide = items.filter('.active'),
			nextSlide = activeSlide.next(),
			prevSlide = activeSlide.prev(),
			firstSlide = items.first(),
			lastSlide = items.last(),
			sliderOffset = container.offset().left,
			reqPos = 0;

			console.log(sliderOffset);
			
		if ($(this).hasClass('slider__controls-button_next')) {
			if (nextSlide.length) {
				findReqPos(nextSlide);
				removeActiveClass(nextSlide);
			} else {
				findReqPos(firstSlide);
				removeActiveClass(firstSlide);
				console.log(firstSlide.offset().left - sliderOffset);
			}
		} else {
			if (prevSlide.length) {
				findReqPos(prevSlide);
				removeActiveClass(prevSlide);
			} else {
				findReqPos(lastSlide);
				removeActiveClass(lastSlide);
			}
		}

		list.css('left', '-=' + reqPos + 'px');

		function removeActiveClass (reqSlide) {
			reqSlide.addClass('active').siblings().removeClass('active');
		}

		function findReqPos (slide) {
			reqPos = slide.offset().left - sliderOffset;
		}
		
	});	
});

.slider {
  margin-left: 400px;
  margin-top: 200px;
  position: relative;
  display: inline-block;
}

.slider__list--wrap {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.slider__list {
  list-style: none;
  padding: 0;
  width: 2000px;
  position: relative;
  left: 0;
  transition-property: left;
  transition: 0.5s;
}
.slider__list:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.slider__item {
  float: left;
}

.slider__controls-button {
  position: absolute;
  top: 150px;
}

.slider__controls-button_next {
  right: -100px;
}

.slider__controls-button_prev {
  left: -100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slider</title>
	<link rel="stylesheet" href="css/main.css">
	<script src="../jquery-1.12.0.js"></script>
</head>
<body>
	<div class="wrapper">
		<div class="maincontent">
			<div class="container">
				<div class="slider">
					<div class="slider__list--wrap">
						<ul class="slider__list">
							<li class="slider__item active">
								<img src="http://lorempixel.com/300/300/city" alt="img">
							</li>
							<li class="slider__item">
								<img src="http://lorempixel.com/300/300/people" alt="img">
							</li>
							<li class="slider__item">
								<img src="http://lorempixel.com/300/300/sports" alt="img">
							</li>
							<li class="slider__item">
								<img src="http://lorempixel.com/300/300/technics" alt="img">
							</li>
						</ul>
					</div>
					<div class="slider__controls">
						<a href="#" class="slider__controls-button slider__controls-button_next">next</a>
						<a href="#" class="slider__controls-button slider__controls-button_prev">prev</a>
					</div>
				</div> <!--END SLIDER-->
			</div>
		</div>
	</div>
	

	<script src="js/slider.js"></script>
</body>
</html>

Вопрос: как правильно реализовать поддержку для смартфонов, лэптопов и т.д. , что бы можно было листать слайдер при касании и движении пальца влево\вправо? Реально ли с помощью JQuery 1.12.0 реализовать данную функцию, и как это собственно сделать? Или же нужно воспользоваться другой библиотекой?