wip #2747 @7

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index 7cee5b04aad31e062ff808bfc05aa7385fb707fd..4950800a94d2c80a0e151f9c7291b42e65330f00 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -199,7 +199,6 @@
                 </ul>
             </div>
         </div>
-
     </div>
 </section>
 

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 88f9b6c8a71c849df0aa2867cfee510b505fe928..10e4bcbc3e8c84edc3cae1ab0e26c3b31113a267 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -19,6 +19,9 @@ let width = $('.slide-img').width(), // --> clip container width
     init = 'rect(0px ',
     final = 'px 0px)';
 
+let container = document.querySelector('.slider');
+let listener = SwipeListener(container);
+
 resize();
 
 $(window).on('orientationchange',function () {
@@ -33,6 +36,10 @@ $(window).on('resize',function () {
 
 // // 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();
@@ -58,8 +65,6 @@ function resize() {
             height = $(this).height(); // --> container height (clip container)
 
         TweenMax.set($(this),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); // on resize apply new width/height to clip container
-
-        console.log('container --> '+ width,height);
     });
 }
 
@@ -84,15 +89,14 @@ function GotoSlide(nextindex, direction){
             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});
 
-            // isRunning = false;
         };
 
             console.log(nextindex, direction);
             TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
+        // TODO : remove negative delay
         // negative delay slow the end of this timeline
 
         let tl = new TimelineMax({onComplete: finishAnimation});
@@ -121,23 +125,6 @@ function GotoSlide(nextindex, direction){
     // console.log(tl.duration()); // timeline duration
 }
 
-//
-// arrowNavigation();
-//
-//  function arrowNavigation() {
-//      $('.arrow').on('click', function () {
-//          resize();
-//          if ($(this).is('.next')) {
-//              direction = 1;
-//          }
-//          else {
-//              direction = -1;
-//          }
-//          let nextindex = (index + direction + slideLength) % slideLength;
-//          GotoSlide(nextindex, direction);
-//      });
-//  }
-
  function nextSlide() {
     let  direction = 1;
 
@@ -160,4 +147,29 @@ function GotoSlide(nextindex, direction){
      $('.arrow.prev').off();
  }
 
- enableArrows();
\ No newline at end of file
+ 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 : BUG --> si on swipe (next, prev, next) on ne voit plus l'image
+function SwipeContent(){
+    container.addEventListener('swipe', function (e) {
+        let directions = e.detail.directions;
+        let x = e.detail.x;
+        let y = e.detail.y;
+
+        if (directions.left) {
+            prevSlide();
+        }
+
+        if (directions.right) {
+            nextSlide();
+        }
+    });
+}
+SwipeContent();
+
+// if ($(window).width() > 769) {
+//     listener.off();
+// }
\ No newline at end of file

diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css
index 2f5ccbfdd57809af7487130d11cfdbeb438e9115..89cb2464b556072df6ceab3fc1f97d63a9edfbd7 100644 (file)
--- a/public/_modules/home-slider/style.css
+++ b/public/_modules/home-slider/style.css
@@ -44,6 +44,11 @@
   width: 100%;
   height: 100%;
 }
+@media (max-width: 769px) {
+  .slide {
+    overflow-x: hidden;
+  }
+}
 .slide-mask {
   overflow: hidden;
   height: 100%;

diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
index 301806603d4f5ed6bf5225bb89c865f3beff0201..0ad8127186048facc1f269b01e01437affb09e7a 100644 (file)
--- a/public/_modules/home-slider/style.styl
+++ b/public/_modules/home-slider/style.styl
@@ -38,7 +38,7 @@ $controlSize= 60px;
   left: 50%
   transform: translateX(-50%)
   //width 100%
-//  //height 100%
+  //height 100%
 .slider
   width: 100%
   position relative
@@ -46,6 +46,8 @@ $controlSize= 60px;
 .slide
   width: 100%
   height: 100%
+  @media (max-width 769px)
+    overflow-x hidden
 .slide-mask
   overflow hidden
   height 100%