Skip to content

Instantly share code, notes, and snippets.

@caionitro

caionitro/index.html

Last active September 4, 2015 12:02
Show Gist options
  • Save caionitro/6cd3d35ca15f037ee451 to your computer and use it in GitHub Desktop.
Save caionitro/6cd3d35ca15f037ee451 to your computer and use it in GitHub Desktop.
Download ZIP
Swipe com Slick, usando slider com multi gestos.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick/slick/slick-theme.css"/>
<title></title>
<style type="text/css">
.tamanho{
font-size: 35px;
border: solid 1px black;
height: 150px;
}
.tamanho2{
height: 100px;
font-size: 25px;
}
</style>
</head>
<body>
<h1>HELLO</h1>
<div id="swipe">
<div class="slider-for tamanho">
<div>your content1</div>
<div>your content2</div>
<div>your content3</div>
</div>
<div class="slider-nav tamanho2">
<div>your content1</div>
<div>your content2</div>
<div>your content3</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="./slick/slick/slick.min.js"></script>
<script type="text/javascript" src="./swipe/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#swipe").swipe( {
swipeDown:function(event, direction, distance, duration, fingerCount, fingerData) {
console.log("You swiped DOWN");
},
swipeUp:function(event, direction, distance, duration, fingerCount, fingerData) {
console.log("You swiped UP");
},
swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
console.log("You swiped LEFT");
$('.slider-for').slick('slickPrev');
},
swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
console.log("You swiped RIGHT");
$('.slider-for').slick('slickNext');
}
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment