From: nael Date: Thu, 11 Jul 2019 16:10:39 +0000 (+0200) Subject: wip #2747 @7 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=fe2a9c0add8adbbb67faeb6795e17a5590578da6;p=pmi.git wip #2747 @7 --- diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html index d9b492b..b007235 100644 --- a/public/_modules/home-slider/index.html +++ b/public/_modules/home-slider/index.html @@ -39,7 +39,7 @@
-
+

Wheel Force Transducer

@@ -58,7 +58,7 @@
-
+
@@ -72,7 +72,7 @@
-
+

slide suivante

@@ -91,7 +91,7 @@
-
+
@@ -104,7 +104,7 @@
-
+

Lorem ipsum

@@ -125,7 +125,7 @@
-
+
@@ -136,8 +136,8 @@
-
-
+
+

Lorrefdcem ipsfdcum

@@ -158,14 +158,13 @@
-
+
-
- +
-
diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js index 96afe44..056788b 100644 --- a/public/_modules/home-slider/slider.js +++ b/public/_modules/home-slider/slider.js @@ -3,42 +3,60 @@ let index = 0, slideLength = $(".slide").length, prevBtn = $(".home-arrow-left"), - nextBtn = $(".home-arrow-right"); + nextBtn = $(".home-arrow-right"), + Delay = 1, + isRunning = false; -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"); - -// Create new offscreen image to test -let theImage = new Image(); -theImage.src = screenImage.attr("src"); +let getImg = new Image(); + getImg.src = $('.img-slider').attr("src"); let img = document.getElementsByClassName('.img-slider'), - width = $('.slide-img').width(), + imgHeight = getImg.naturalHeight, + imgWidth = getImg.naturalWidth; + +let width = $('.slide-img').width(), height = $('.slide-img').height(), - imgHeight = theImage.height, - imgWidth = theImage.width, init = 'rect(0px ', final = 'px 0px)'; + // $(".slide-img").css('clip', 'rect(0px, '+width +'px,'+height +' px, 0px)'); + console.log('SANS resize '+width,height); + $('.img-slider').each(function () { - $(this).css({'width':imgWidth, 'height':imgHeight}); + getImg = $(this).attr("src"); + console.log(getImg); + + let widthFactor= width / imgWidth, // coef multiplicateur width + heightFactor= height / imgHeight ; // coef multiplicateur height + + console.log(widthFactor,heightFactor); + $(this).css({'width':imgWidth*Math.max(widthFactor, heightFactor), 'height':imgHeight*Math.max(widthFactor, heightFactor)}); + +}); + +$(window).on('orientationchange',function () { + resize(); + setTimeout(function () { + resize(); + },1000); +}); +$(window).on('resize',function () { + resize(); }); +resize(); -// $('.img-slider').css({'width':imgWidth, 'height':imgHeight}); -console.log(imgWidth,imgHeight); -console.log('Container width: '+width+' ---- Container height: '+height); +// // RESIZE +function resize() { + let width = $('.slide-img').eq(index).width(), + height = $('.slide-img').eq(index).height(); + console.log(width, height); + // $('.slide-img').css({'width': width ,'height':height}); +} function GotoSlide(nextindex, direction){ - if (!isRunning){ isRunning = true; @@ -47,33 +65,21 @@ function GotoSlide(nextindex, direction){ currentText = $('.slide-txt').eq(index), nextText = $('.slide-txt').eq(nextindex), currentImg = $('.img-slider').eq(index), + nextImg = $('.img-slider').eq(nextindex), currentContainerImg = $('.slide-img').eq(index), currentIndicatorIndex = $('.slider-position').eq(index), 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}); + console.log(nextindex, direction); + TweenMax.set('.slide-img',{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); let tl = new TimelineMax({onComplete: isSlideRunning}); tl.set(currentSlideIndex,{zIndex: 97}); tl.set(nextText,{opacity:1,x:0}); tl.to(currentText,0.5*Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut}); - tl.to(currentImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay); + tl.to(currentContainerImg,2*Delay,{ clip: init+ (direction)*-1*imgWidth+'px,'+ height+'px,'+ (direction)*-1*imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*Delay); tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay); diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css index 7619fcc..8111b73 100644 --- a/public/_modules/home-slider/style.css +++ b/public/_modules/home-slider/style.css @@ -32,6 +32,8 @@ } .img-slider { position: absolute; + left: 50%; + transform: translateX(-50%); } .slider { width: 100%; @@ -79,3 +81,8 @@ img { max-width: unset !important; } +@media only screen and (max-width: 768px) { + .slide-content.column { + margin-bottom: -10vw !important; + } +} diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl index e0a1d29..b7256cb 100644 --- a/public/_modules/home-slider/style.styl +++ b/public/_modules/home-slider/style.styl @@ -35,6 +35,8 @@ $controlSize= 60px; overflow: hidden; .img-slider position: absolute + left: 50% + transform: translateX(-50%) //width 100% // //height 100% .slider @@ -75,4 +77,8 @@ $controlSize= 60px; grid-auto-columns: 1fr; grid-auto-flow: column; img - max-width unset!important \ No newline at end of file + max-width unset!important + +.slide-content.column + @media only screen and (max-width: 768px) + margin-bottom: -10vw!important