peternatewood/slider.html

## slider.html
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8">
<style type="text/css">
html, body {
  width: 100%;
}
body {
  background: #e0e7ef;
  text-align: center;
  margin: 0;
}
h1 {
  color: #333;
  font: 40px Arial, sans-serif;
}

#slider-wrapper {
  position: relative;
  width: 100%;
}
#slider-container {
  overflow-x: hidden;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}
#slider-row {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  left: 0;
}
.slide {
  color: #fff;
  font: 64px/480px Arial, sans-serif;
  text-shadow: 0 0 2px #000;
  height: 480px;
}
.slider-button {
  position: absolute;
  color: #fff;
  font: bold 72px monospace;
  text-decoration: none;
  text-shadow: 0 0 2px #000;
  padding: 40px 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0.75;
  transition: opacity 300ms;
}
.slider-button:hover {
  opacity: 1;
}
#slider-button-left {
  left: 0;
}
#slider-button-right {
  right: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
  <h1>Slider!</h1>
  <div id="slider-wrapper">
    <div id="slider-container">
      <div id="slider-row" style="width:400%">
        <!-- This is where your content would go -->
        <div class="slide" style="width:25%;background:#3af;">One</div>
        <div class="slide" style="width:25%;background:#fa3;">Two</div>
        <div class="slide" style="width:25%;background:#f3a;">Three</div>
        <div class="slide" style="width:25%;background:#af3;">Four</div>
      </div>
    </div>

    <a href="#" id="slider-button-left" class="slider-button">&laquo;</a>
    <a href="#" id="slider-button-right" class="slider-button">&raquo;</a>
  </div>

<script type="text/javascript">
$(document).ready(function() {
  var sliderContainer = $("#slider-container");
  if (sliderContainer.length != 0) {
    var sliderRow = $("#slider-row");
    var sliders = $(".slide");
    var sliderLeft = $("#slider-button-left");
    var sliderRight = $("#slider-button-right");

    var SLIDE_COUNT = sliders.length;
    var currentSlide = 0;

    function updateSliderArrowVisibility() {
      if (currentSlide == 0) {
        sliderLeft.hide();
      }
      else {
        sliderLeft.show();
      }

      if (currentSlide == SLIDE_COUNT - 1) {
        sliderRight.hide();
      }
      else {
        sliderRight.show();
      }
    }
    updateSliderArrowVisibility();

    function slide(direction) {
      var nextSlide = Math.min(SLIDE_COUNT - 1, Math.max(0, currentSlide + direction));
      currentSlide = nextSlide;
      sliderRow.animate({ left: (-100 * currentSlide) + "%" }, 650);

      updateSliderArrowVisibility();
    }

    sliderLeft.on("click", function(e) {
      e.preventDefault();
      slide(-1);
    });
    sliderRight.on("click", function(e) {
      e.preventDefault();
      slide(1);
    });

    var SWIPE_THRESHOLD_MOD = 0.15; // Fraction of window width
    var touchStartX, lastTouchX;

    sliderRow.on("touchstart", handleTouchStart);
    sliderRow.on("touchmove", handleTouchMove);
    sliderRow.on("touchend", handleTouchEnd);
    sliderRow.on("touchcancel", handleTouchEnd);

    function handleTouchStart(e) {
      var event = e.originalEvent;
      if (event.touches.length == 1) {
        // Store the the touch starting point
        touchStartX = event.touches[0].screenX;
        lastTouchX = touchStartX;
      }
    }
    function handleTouchMove(e) {
      var event = e.originalEvent;
      if (event.touches.length == 1) {
        // Slide the sliders based on horizontal movement distance
        var distance = event.touches[0].screenX - lastTouchX;
        var left = sliderRow.offset().left;
        var newPosition = Math.min(Math.max(0 - (SLIDE_COUNT - 0.9) * window.innerWidth, left + distance), window.innerWidth * 0.1);

        sliderRow.css("left", newPosition + "px");
        lastTouchX = event.touches[0].screenX;
      }
    }
    function handleTouchEnd(e) {
      // Slide in swiping direction if swipe distance is far enough
      var distance = lastTouchX - touchStartX;
      var direction = 0;
      if (Math.abs(distance) > SWIPE_THRESHOLD_MOD * window.innerWidth) {
        direction = distance > 0 ? -1 : 1;
      }
      slide(direction);
    }
  }
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Slider</title>
	<meta charset="utf-8">
	<style type="text/css">
	html, body {
	width: 100%;
	}
	body {
	background: #e0e7ef;
	text-align: center;
	margin: 0;
	}
	h1 {
	color: #333;
	font: 40px Arial, sans-serif;
	}

	#slider-wrapper {
	position: relative;
	width: 100%;
	}
	#slider-container {
	overflow-x: hidden;
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
	}
	#slider-row {
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	left: 0;
	}
	.slide {
	color: #fff;
	font: 64px/480px Arial, sans-serif;
	text-shadow: 0 0 2px #000;
	height: 480px;
	}
	.slider-button {
	position: absolute;
	color: #fff;
	font: bold 72px monospace;
	text-decoration: none;
	text-shadow: 0 0 2px #000;
	padding: 40px 12px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0.75;
	transition: opacity 300ms;
	}
	.slider-button:hover {
	opacity: 1;
	}
	#slider-button-left {
	left: 0;
	}
	#slider-button-right {
	right: 0;
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	</head>
	<body>
	<h1>Slider!</h1>
	<div id="slider-wrapper">
	<div id="slider-container">
	<div id="slider-row" style="width:400%">
	<!-- This is where your content would go -->
	<div class="slide" style="width:25%;background:#3af;">One</div>
	<div class="slide" style="width:25%;background:#fa3;">Two</div>
	<div class="slide" style="width:25%;background:#f3a;">Three</div>
	<div class="slide" style="width:25%;background:#af3;">Four</div>
	</div>
	</div>

	<a href="#" id="slider-button-left" class="slider-button">«</a>
	<a href="#" id="slider-button-right" class="slider-button">»</a>
	</div>

	<script type="text/javascript">
	$(document).ready(function() {
	var sliderContainer = $("#slider-container");
	if (sliderContainer.length != 0) {
	var sliderRow = $("#slider-row");
	var sliders = $(".slide");
	var sliderLeft = $("#slider-button-left");
	var sliderRight = $("#slider-button-right");

	var SLIDE_COUNT = sliders.length;
	var currentSlide = 0;

	function updateSliderArrowVisibility() {
	if (currentSlide == 0) {
	sliderLeft.hide();
	}
	else {
	sliderLeft.show();
	}

	if (currentSlide == SLIDE_COUNT - 1) {
	sliderRight.hide();
	}
	else {
	sliderRight.show();
	}
	}
	updateSliderArrowVisibility();

	function slide(direction) {
	var nextSlide = Math.min(SLIDE_COUNT - 1, Math.max(0, currentSlide + direction));
	currentSlide = nextSlide;
	sliderRow.animate({ left: (-100 * currentSlide) + "%" }, 650);

	updateSliderArrowVisibility();
	}

	sliderLeft.on("click", function(e) {
	e.preventDefault();
	slide(-1);
	});
	sliderRight.on("click", function(e) {
	e.preventDefault();
	slide(1);
	});

	var SWIPE_THRESHOLD_MOD = 0.15; // Fraction of window width
	var touchStartX, lastTouchX;

	sliderRow.on("touchstart", handleTouchStart);
	sliderRow.on("touchmove", handleTouchMove);
	sliderRow.on("touchend", handleTouchEnd);
	sliderRow.on("touchcancel", handleTouchEnd);

	function handleTouchStart(e) {
	var event = e.originalEvent;
	if (event.touches.length == 1) {
	// Store the the touch starting point
	touchStartX = event.touches[0].screenX;
	lastTouchX = touchStartX;
	}
	}
	function handleTouchMove(e) {
	var event = e.originalEvent;
	if (event.touches.length == 1) {
	// Slide the sliders based on horizontal movement distance
	var distance = event.touches[0].screenX - lastTouchX;
	var left = sliderRow.offset().left;
	var newPosition = Math.min(Math.max(0 - (SLIDE_COUNT - 0.9) * window.innerWidth, left + distance), window.innerWidth * 0.1);

	sliderRow.css("left", newPosition + "px");
	lastTouchX = event.touches[0].screenX;
	}
	}
	function handleTouchEnd(e) {
	// Slide in swiping direction if swipe distance is far enough
	var distance = lastTouchX - touchStartX;
	var direction = 0;
	if (Math.abs(distance) > SWIPE_THRESHOLD_MOD * window.innerWidth) {
	direction = distance > 0 ? -1 : 1;
	}
	slide(direction);
	}
	}
	});
	</script>
	</body>
	</html>