Quick Slider Example - Mobile Swipe Support

In this example below you will see how to do a Quick Slider Example - Mobile Swipe Support with some HTML / CSS and Javascript

Just a mockup of a slider module for an app...

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Quick Slider Example - Mobile Swipe Support</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>
	Super Simple Slider
</h1>
<h3>With Mobile Swipe Support <br />(via jQuery Mobile)</h3>

<div class="window">
	<div class="sp-panel-set">
			
		<div class="sp-panel">
				<div class="img one">1</div>
			</div>
		
		<div class="sp-panel">
				<div class="img two">2</div>
			</div>
			
		<div class="sp-panel">
				<div class="img three">3</div>
		</div>
		
		<div class="sp-panel">
				<div class="img four">4</div>
		</div>
		
	</div>
	
		<div class="buttons">
			<div class="left">
				<<
			</div>
			<div class="right">
				>>
			</div>
		</div>
	
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/simgooder/quick-slider-example-mobile-swipe-support-doeONW */
* {
  box-sizing: border-box;
}

.window {
  width: 600px;
  height: 400px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  margin: 50px auto;
}

.sp-panel {
  width: 600px;
  height: 400px;
  float: left;
}

.sp-panel-set {
  width: 400%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  transition: 0.4s;
  /*overflow:hidden;*/
}

.one {
  background: blueViolet;
}

.two {
  background: lightSalmon;
}

.three {
  background: turquoise;
}

.four {
  background: tomato;
}

.buttons {
  position: absolute;
  bottom: 1%;
  left: 40%;
  color: #fff;
  font-size: 2em;
}
.buttons .left, .buttons .right {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.img {
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 25%;
  color: white;
  font-size: 5em;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.panel-toggle-right {
  margin-right: -600px;
}

.panel-toggle-left {
  margin-left: -600px;
}

h1, h3 {
  text-align: center;
  color: #666;
}


/*Downloaded from https://www.codeseek.co/simgooder/quick-slider-example-mobile-swipe-support-doeONW */
$(function() {
	var windowWidth = $(".window").width();
	var windowHeight = $(".window").height();
	var i = 0;
	var panelAmount = $(".sp-panel").length;
	
	// Give the panels a fitting H/W
	$(".sp-panel").css("width", windowWidth);
	$(".sp-panel").css("height", windowHeight);
	
	// Click on "Right" to move forward
		$(".right").click(function(){
		
			i+=1;
			
			if (i < 0 ){
				i = panelAmount - 1;
			}
			
			if (i >= panelAmount) {
				i = 0;
			}
		
			var pos=(i*windowWidth);
			$(".sp-panel-set").css("left", -pos + "px");
			});
	
		// Click on "Left" to move backward
		$(".left").click(function(){
			
			i-=1;
			
			if (i < 0 ){
				i = panelAmount - 1;
			}
			
			if (i >= panelAmount) {
				i = 0;
			}
			
			var pos=(i*windowWidth);
			$(".sp-panel-set").css("left", -pos + "px");
			});
	
	// Attempted Mobile Swipe Alternative
	
	// Swipe Forward
		$(".sp-panel-set").on("swipeleft", function(event){
		
			i+=1;
			
			if (i < 0 ){
				i = panelAmount - 1;
			}
			
			if (i >= panelAmount) {
				i = 0;
			}
		
			var pos=(i*windowWidth);
			$(".sp-panel-set").css("left", -pos + "px");
			});
	
	// Swipe Backward
			$(".sp-panel-set").on("swiperight", function(event){
			
			i-=1;
			
			if (i < 0 ){
				i = panelAmount - 1;
			}
			
			if (i >= panelAmount) {
				i = 0;
			}
			
			var pos=(i*windowWidth);
			$(".sp-panel-set").css("left", -pos + "px");
			});
	
});

Comments