From: nael Date: Wed, 10 Jul 2019 16:19:44 +0000 (+0200) Subject: wip #2747 @7 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=6005e9a410b3312e513cc5f714f0d454a375e960;p=pmi.git wip #2747 @7 --- diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js index 6a62c68..96afe44 100644 --- 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 215e09c..7619fcc 100644 --- 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 4c0af95..e0a1d29 100644 --- 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