artlili/swipe slider

## swipe slider
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .slider {
    position:relative;
    overflow: hidden;
    margin: 0px;
    width: 200px;
    height: 200px;
  }
  .items {
    white-space: nowrap;
  }
  .item {
    display: inline-block;
  }
</style>
<body>
  <div id="slider">
    <div class="items">
      <div class="item">Курьерская доставка</div>
      <div class="item">Самовывоз</div>
      <div class="item">Почта России</div>
      <div class="item">Курьерская доставка</div>
      <div class="item">Самовывоз</div>
      <div class="item">Почта России</div>
    </div>
  </div>
</body>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$(function () {

var slider = $("#slider"),
    items = $(".items"),
    sliderWidth = slider.outerWidth(),
    sliderScroll = slider[0].scrollWidth,
    diff = (sliderScroll / sliderWidth) - 1, // разница ширины контейнеров
    padding = 20, // Padding при скроле
    damp = 20, // Для плавности скрола
    mousePos = 20, // Позиция начальная
    mousePos2 = 0, // Позиция после скрола
    posX = 0,
    moveArea = sliderWidth - (padding * 2), // доступная область передвижения мыши
    moveRatio = (sliderWidth / moveArea); // доступный коэффицент передвижения
console.log(sliderScroll)
slider.on('swipe', function (e) {
    mousePos = e.pageX - this.offsetLeft;
    mousePos2 = Math.min(Math.max(0, mousePos - padding), moveArea) * moveRatio;
    posX += (mousePos2 - posX) / damp;
    items.css({
        marginLeft: -posX * diff
    });
});

});
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<style>
	.slider {
	position:relative;
	overflow: hidden;
	margin: 0px;
	width: 200px;
	height: 200px;
	}
	.items {
	white-space: nowrap;
	}
	.item {
	display: inline-block;
	}
	</style>
	<body>
	<div id="slider">
	<div class="items">
	<div class="item">Курьерская доставка</div>
	<div class="item">Самовывоз</div>
	<div class="item">Почта России</div>
	<div class="item">Курьерская доставка</div>
	<div class="item">Самовывоз</div>
	<div class="item">Почта России</div>
	</div>
	</div>
	</body>
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous"></script>
	<script>
	$(function () {

	var slider = $("#slider"),
	items = $(".items"),
	sliderWidth = slider.outerWidth(),
	sliderScroll = slider[0].scrollWidth,
	diff = (sliderScroll / sliderWidth) - 1, // разница ширины контейнеров
	padding = 20, // Padding при скроле
	damp = 20, // Для плавности скрола
	mousePos = 20, // Позиция начальная
	mousePos2 = 0, // Позиция после скрола
	posX = 0,
	moveArea = sliderWidth - (padding * 2), // доступная область передвижения мыши
	moveRatio = (sliderWidth / moveArea); // доступный коэффицент передвижения
	console.log(sliderScroll)
	slider.on('swipe', function (e) {
	mousePos = e.pageX - this.offsetLeft;
	mousePos2 = Math.min(Math.max(0, mousePos - padding), moveArea) * moveRatio;
	posX += (mousePos2 - posX) / damp;
	items.css({
	marginLeft: -posX * diff
	});
	});

	});
	</script>
	</html>