From d1e42a04ad5d74dc6d7ae3659efa9e9252fb9c8f Mon Sep 17 00:00:00 2001 From: nael Date: Mon, 5 Aug 2019 18:08:00 +0200 Subject: [PATCH] wip #2747 @7 --- public/_modules/home-slider/slider.js | 43 ++++++++++----------------- 1 file changed, 16 insertions(+), 27 deletions(-) diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js index 10e4bcb..bf6a3bf 100644 --- a/public/_modules/home-slider/slider.js +++ b/public/_modules/home-slider/slider.js @@ -5,7 +5,6 @@ let index = 0, prevBtn = $(".home-arrow-left"), nextBtn = $(".home-arrow-right"), Delay = 1; - let getImg = new Image(); getImg.src = $('.img-slider').attr("src"); @@ -33,13 +32,8 @@ $(window).on('orientationchange',function () { $(window).on('resize',function () { resize(); }); - -// // RESIZE +// RESIZE function resize() { - // if ($(window).width() > 769) { - // listener.off(); - // } - $('.img-slider').each(function () { let width = $('.slide-img').eq(index).width(), height = $('.slide-img').eq(index).height(); @@ -69,7 +63,6 @@ function resize() { } function GotoSlide(nextindex, direction){ - let width = $('.slide-img').eq(index).width(), height = $('.slide-img').eq(index).height(); @@ -85,14 +78,14 @@ function GotoSlide(nextindex, direction){ nextContainerImg = $('.slide-img').eq(nextindex); let finishAnimation = function () { - // alert("finished"); + + listener.on(); // --> activate swipe when animation is finished currentSlideIndex.removeClass('active').eq(index); enableArrows(); // when animation is finished we reactivate click event TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); }; - console.log(nextindex, direction); TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); @@ -120,22 +113,22 @@ function GotoSlide(nextindex, direction){ nextSlideIndex.addClass('active').eq(nextindex); disableArrows(); // disable click on arrows until animation finishes - index=nextindex; + listener.off(); // --> disable swipe when the animation is launched - // console.log(tl.duration()); // timeline duration + index=nextindex; } function nextSlide() { - let direction = 1; + let direction = 1; - let nextindex = (index + direction + slideLength) % slideLength; - GotoSlide(nextindex, direction); + let nextindex = (index + direction + slideLength) % slideLength; + GotoSlide(nextindex, direction); } function prevSlide(){ - let direction = -1; + let direction = -1; - let nextindex = (index + direction + slideLength) % slideLength; - GotoSlide(nextindex, direction); + let nextindex = (index + direction + slideLength) % slideLength; + GotoSlide(nextindex, direction); } function enableArrows() { @@ -149,16 +142,15 @@ function GotoSlide(nextindex, direction){ enableArrows(); -// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over -// TODO : 2 --> Disable swipe when screen size >768px +// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over // update : works on desktop, bug with mobile devices // TODO : BUG --> si on swipe (next, prev, next) on ne voit plus l'image -function SwipeContent(){ + +function swiper(){ container.addEventListener('swipe', function (e) { let directions = e.detail.directions; - let x = e.detail.x; - let y = e.detail.y; + // listener.on(); if (directions.left) { prevSlide(); } @@ -168,8 +160,5 @@ function SwipeContent(){ } }); } -SwipeContent(); -// if ($(window).width() > 769) { -// listener.off(); -// } \ No newline at end of file +swiper(); -- 2.39.5