Skip to content

Instantly share code, notes, and snippets.

@zhannes
Last active December 12, 2015 04:38
Show Gist options
  • Save zhannes/4715399 to your computer and use it in GitHub Desktop.
Save zhannes/4715399 to your computer and use it in GitHub Desktop.
rough touch based slider
(function($){
var slides, numSlides,
ct = 0,
settings = {
duration: 500,
easing: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)'
};
function transition(){
var props = { left : (ct*-100) + '%' };
slides.animate(props,settings);
}
function back(e){
if(ct === 0) return; // first slide
--ct;
transition();
}
function next(e){
// last slide ?
if(ct === (numSlides - 1) ) {
ct = 0; // reset
return transition();
}
++ct;
transition();
}
function init(){
slides = $('.slides');
numSlides = slides.children().length;
// back
slides.swipeRight(back);
// next
slides.swipeLeft(next);
}
$(init);
})(this.Zepto);
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<link href="style.css" rel="Stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
<ul class="slides">
<li class="slide red"></li>
<li class="slide blue"></li>
<li class="slide yellow"></li>
</ul>
<div class="clear"></div>
</div>
<div class="txt-center">swipe</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
<script src="app.js"></script>
</body>
</html>
ul, li, div {
margin: 0;
padding: 0;
border: 0;
}
.clear { clear: both; }
.txt-center { text-align: center; }
.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.slide {
list-style-type: none;
display: block;
float: left;
width: 200px;
height: 200px;
}
.slides { position: absolute; width: 300%; }
.wrapper {
position: relative;
overflow: hidden;
width: 200px; /* one slide */
height: 200px;
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment