<link rel="stylesheet" href="../../css/app.css">
<link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
<title>pmi</title>
+
</head>
<body >
<header class="site-header"><div class="container flex items-center py-8 relative z-20">
<img class="arrow prev home-arrow-left" src="img/home-arrow-left.svg" alt="">
<img class="arrow next home-arrow-right" src="img/home-arrow-right.svg" disabled="disabled" alt="">
</div>
- <div class="slider relative">
+ <div id="myElement" class="slider relative" >
<div data-slide="1" class="column-wrapper absolute slide active hide ">
<div class="column slide-content pt-2v pr-1v pb-2v slide-txt">
</div>
</section>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+<script src="jQuery.js"></script>
+<script src="TimelineMax.min.js"></script>
+<script src="TweenMax.min.js"></script>
+<script src="swipe-listener.min.js"></script>
+<script src="hammer.js"></script>
<script src="slider.js"></script>
<!--<script src="../../js/app.js"></script>-->
</body>
resize();
+
+
+var myElement = document.getElementById('myElement');
+
+var hammertime = new Hammer(myElement);
+hammertime.get('swipe').set({ enable: true });
+
+hammertime.on('swipeleft', function(ev) {
+ prevSlide();
+});
+
+hammertime.on('swiperight', function(ev) {
+ nextSlide();
+});
+
+
+
$(window).on('orientationchange',function () {
resize();
setTimeout(function () {
});
$(window).on('resize',function () {
resize();
+
});
// RESIZE
function resize() {
nextIndicatorIndex = $('.slider-position').eq(nextindex),
nextContainerImg = $('.slide-img').eq(nextindex);
- let finishAnimation = function () {
+ hammertime.get('swipe').set({ enable: false }); // disable swipe when animation is running
+
+ console.log( hammertime.get('swipe').set({ enable: false }));
+ let finishAnimation = function () {
+
+ hammertime.get('swipe').set({ enable: true });
+
- listener.on(); // --> activate swipe when animation is finished
currentSlideIndex.removeClass('active').eq(index);
enableArrows(); // when animation is finished we reactivate click event
nextSlideIndex.addClass('active').eq(nextindex);
disableArrows(); // disable click on arrows until animation finishes
- listener.off(); // --> disable swipe when the animation is launched
index=nextindex;
}
// TODO : BUG --> si on swipe (next, prev, next) on ne voit plus l'image
-function swiper(){
- container.addEventListener('swipe', function (e) {
- let directions = e.detail.directions;
-
- // listener.on();
- if (directions.left) {
- prevSlide();
- }
-
- if (directions.right) {
- nextSlide();
- }
- });
-}
+// function swiper(){
+// container.addEventListener('swipe', function (e) {
+// let directions = e.detail.directions;
+//
+// // listener.on();
+// if (directions.left) {
+// prevSlide();
+// }
+//
+// if (directions.right) {
+// nextSlide();
+// }
+// });
+// }
+//
+// swiper();
-swiper();
projects / pmi.git / commitdiff