wip #2747 @7

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 6a62c68e27cabf634367e281664bab3be5905963..96afe44932d83ea2060a9484370a291e1a301e4a 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -9,17 +9,39 @@ let slides = document.querySelectorAll('.slide');
 let animationDuration = 0; // durée de l'animation
 let delayBetweenAnim = 2000; // delay entre chaque slide
 let mouvement = 0; // valeur en px du déplacement des blocks
+let Delay = 1;
+let isRunning = false;
+// Get on screen image
+let screenImage = $(".img-slider");
 
-let pending = false;
+// Create new offscreen image to test
+let theImage = new Image();
+theImage.src = screenImage.attr("src");
 
-let width = $('.slide-img').width(),
+let img = document.getElementsByClassName('.img-slider'),
+    width = $('.slide-img').width(),
     height = $('.slide-img').height(),
-    imgWidth =$('.img-slider').width(),
+    imgHeight = theImage.height,
+    imgWidth = theImage.width,
     init = 'rect(0px ',
     final = 'px 0px)';
 
+$('.img-slider').each(function () {
+   $(this).css({'width':imgWidth, 'height':imgHeight});
+});
+
+// $('.img-slider').css({'width':imgWidth, 'height':imgHeight});
+console.log(imgWidth,imgHeight);
+console.log('Container width: '+width+' ---- Container height: '+height);
+
+
+
+
 function GotoSlide(nextindex, direction){
 
+    if (!isRunning){
+        isRunning = true;
+
     let currentSlideIndex = $('.slide').eq(index),
         nextSlideIndex = $('.slide').eq(nextindex),
          currentText = $('.slide-txt').eq(index),
@@ -30,41 +52,36 @@ function GotoSlide(nextindex, direction){
         nextIndicatorIndex = $('.slider-position').eq(nextindex),
          nextContainerImg = $('.slide-img').eq(nextindex);
 
+        $(window).resize(function () {
+
+            let   width = $('.slide-img').width(),
+                height = $('.slide-img').height(),
+                imgHeight = theImage.height,
+                imgWidth = theImage.width;
+
+            TweenMax.set('.img-slider',{clip:init + imgWidth +'px '+ imgHeight+ final, ease: Power3.easeOut});
+
+            console.log('%c Image width: '+imgWidth+' ---- image height: '+imgHeight,'background: #222; color: #bada55');
+            console.log('Container width: '+width+' ---- Container height: '+height);
+        });
+
     console.log(nextindex, direction);
     TweenMax.set('.img-slider',{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
 
-    let tl = new TimelineMax();
+    let tl = new TimelineMax({onComplete: isSlideRunning});
     tl.set(currentSlideIndex,{zIndex: 97});
     tl.set(nextText,{opacity:1,x:0});
-    tl.to(currentText,0.5,{x:-50*direction,opacity:0});
+    tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
 
-    // tl.to(currentImg,2,{clip:init +width*(direction)*-1 +'px '+ height+ 'px'+ '-'+imgWidth+'px', ease: Power2.easeInOut,},"-=0.8");
+    tl.to(currentImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay);
 
-    if(direction === -1){
-        tl.to(currentImg,2,{ clip: init+ imgWidth+'px,'+ height+'px,'+ imgWidth+'px', ease: Power2.easeInOut }, "-=0.8");
-    }else{
-        tl.to(currentImg,2,{ clip: init+ '-'+imgWidth+'px,'+ height+'px,'+ '-'+imgWidth+'px', ease: Power2.easeInOut }, "-=0.8");
-    }
-
-    tl.from(nextText,0.5,{x:80*direction,opacity:0},'-=1.4');
-    tl.from(nextContainerImg,0.8,{x:150*direction,ease: Power2.easeInOut},'-=1.8');
-    tl.to(currentContainerImg,0.8,{x:-250*direction,ease: Power2.easeInOut},"-=1.8");
+    tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay);
 
+    tl.from(nextContainerImg,1.5*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay);
+    tl.to(currentContainerImg,1.5*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay);
     tl.set(currentSlideIndex,{zIndex: 0});
-    // tl.set(nextContainerImg,{x: 0});
     tl.set(currentContainerImg,{x:0});
 
-
-    // tl.set(currentText,{opacity:1});
-    // tl.to(currentText,1,{x:-200,opacity:0});
-    // tl.set(currentSlideIndex,{zIndex: 999});
-    // tl.set(nextText,{opacity:0});
-    // tl.to(currentImg,1,{clip:init + '-'+width +'px '+ height+ final, ease: Power1.easeIn},'-=0.5');
-    // tl.from(nextText,1,{x:200,opacity:0},'-=0.5');
-    // tl.set(currentText,{opacity:1,x:0});
-    // tl.set(currentSlideIndex,{zIndex: 0});
-
-
     nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
     currentIndicatorIndex.removeClass('active-indicator').eq(index);
 
@@ -74,9 +91,18 @@ function GotoSlide(nextindex, direction){
 
     setTimeout(function () {
         currentSlideIndex.removeClass('active').eq(index);
-    },1000);
+    },1000*Delay);
 
     index=nextindex;
+
+    function isSlideRunning(){
+            isRunning = false;
+        }
+
+    }
+    else{
+        return false;
+    }
 }
 
 $('.arrow').on('click',function () {
@@ -87,6 +113,5 @@ $('.arrow').on('click',function () {
         direction=-1;
     }
     let nextindex = (index +direction + slideLength)% slideLength;
-
     GotoSlide(nextindex,direction);
 });

diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css
index 215e09c6be759c055480d6a904d6c30dd156b9dc..7619fcc67806a3381fd94383d4d307290869dff8 100644 (file)
--- a/public/_modules/home-slider/style.css
+++ b/public/_modules/home-slider/style.css
@@ -26,12 +26,12 @@
   display: grid;
 }
 .slide-img {
-  position: relative;
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
 }
 .img-slider {
   position: absolute;
-  width: 100%;
-  height: 100%;
 }
 .slider {
   width: 100%;
@@ -45,6 +45,7 @@
 .slide-mask {
   overflow: hidden;
   height: 100%;
+  position: relative;
 }
 .slider-indicator {
   position: absolute;
@@ -68,3 +69,13 @@
   background: #fff;
   transition: all 400ms ease-in-out;
 }
+@media only screen and (max-width: 768px) {
+  .slide.column-wrapper {
+    grid-template-columns: 1fr;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+  }
+}
+img {
+  max-width: unset !important;
+}

diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
index 4c0af9541cc634f029c169cdef07645e7fd58332..e0a1d2994531417cebc2bb4e8e81800c8693e0d0 100644 (file)
--- a/public/_modules/home-slider/style.styl
+++ b/public/_modules/home-slider/style.styl
@@ -30,11 +30,13 @@ $controlSize= 60px;
 .column-wrapper.active
   display grid
 .slide-img
-  position: relative
+  position: absolute
+  width: 100%;
+  overflow: hidden;
 .img-slider
   position: absolute
-  width 100%
-  height 100%
+  //width 100%
+//  //height 100%
 .slider
   width: 100%
   position relative
@@ -45,6 +47,7 @@ $controlSize= 60px;
 .slide-mask
   overflow hidden
   height 100%
+  position relative
 .slider-indicator
   position absolute
   bottom 60px
@@ -62,4 +65,14 @@ $controlSize= 60px;
   width: 10px
   height 10px
   background: white
-  transition all 400ms ease-in-out
\ No newline at end of file
+  transition all 400ms ease-in-out
+//.slider-control
+//  @media only screen and (max-width: 768px)
+//    display none
+.slide.column-wrapper
+  @media only screen and (max-width: 768px)
+    grid-template-columns: 1fr;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+img
+  max-width unset!important
\ No newline at end of file