]> _ Git - pmi.git/commitdiff
wip #2747 @7
authornael <nael@cubedesigners.com>
Mon, 5 Aug 2019 16:08:00 +0000 (18:08 +0200)
committernael <nael@cubedesigners.com>
Mon, 5 Aug 2019 16:08:00 +0000 (18:08 +0200)
public/_modules/home-slider/slider.js

index 10e4bcbc3e8c84edc3cae1ab0e26c3b31113a267..bf6a3bf2182f8ae2158d2aac876feedbd039cb91 100644 (file)
@@ -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();