pmi

- +

@@ -39,7 +39,7 @@

Wheel Force Transducer

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

@@ -184,5 +184,18 @@ + - \ No newline at end of file + + + \ No newline at end of file diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js index d82f8cd..737b806 100644 --- a/public/_modules/home-slider/slider.js +++ b/public/_modules/home-slider/slider.js @@ -69,6 +69,9 @@ function GotoSlide(nextindex, direction){ if (!isRunning) { isRunning = true; + let width = $('.slide-img').eq(index).width(), + height = $('.slide-img').eq(index).height(); + let currentSlideIndex = $('.slide').eq(index), nextSlideIndex = $('.slide').eq(nextindex), currentText = $('.slide-txt').eq(index), @@ -81,8 +84,24 @@ function GotoSlide(nextindex, direction){ nextContainerImg = $('.slide-img').eq(nextindex); let finishAnimation = function () { - alert("finished"); + // alert("finished"); currentSlideIndex.removeClass('active').eq(index); + + + /// AJOUTER DANS UNE FONCTION + $('.arrow').on('click',function () { + resize(); + if($(this).is('.next')){ + direction = 1; + } + else{ + direction=-1; + } + let nextindex = (index +direction + slideLength)% slideLength; + GotoSlide(nextindex,direction); + }); // when animation is finished we reactivate click event + TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); + isRunning = false; }; @@ -92,6 +111,8 @@ function GotoSlide(nextindex, direction){ // negative delay slow the end of this timeline let tl = new TimelineMax({onComplete: finishAnimation}); + // tl.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut}); + 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}); @@ -99,8 +120,8 @@ function GotoSlide(nextindex, direction){ tl.from(nextText,0.5*Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*Delay); - tl.from(nextContainerImg,1*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s - tl.to(currentContainerImg,1*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay); // initial delay value 1.5s + tl.from(nextContainerImg,1.5*Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*Delay); // initial delay value 1.5s + tl.to(currentContainerImg,1.5*Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*Delay); // initial delay value 1.5s tl.set(currentSlideIndex,{zIndex: 0}); tl.set(currentContainerImg,{x:0}); @@ -109,6 +130,7 @@ function GotoSlide(nextindex, direction){ nextSlideIndex.addClass('active').eq(nextindex); + $('.arrow').off(); // disable click on arrows index=nextindex; } else { diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css index 8111b73..fe5aec3 100644 --- a/public/_modules/home-slider/style.css +++ b/public/_modules/home-slider/style.css @@ -86,3 +86,28 @@ img { margin-bottom: -10vw !important; } } +@media only screen and (max-width: 500px) { + .slide-content.column { + margin-bottom: 0 !important; + } +} +@media only screen and (max-width: 500px) { + .slider-img-container { + display: none; + } +} +@media only screen and (max-width: 500px) { + .arrow { + display: none; + } +} +@media only screen and (max-width: 500px) { + .mobile-slider { + background-image: url("img/home-car.jpg"); + } +} +@media only screen and (max-width: 500px) { + .container { + padding: 0 !important; + } +} diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl index b7256cb..58852b2 100644 --- a/public/_modules/home-slider/style.styl +++ b/public/_modules/home-slider/style.styl @@ -82,3 +82,18 @@ img .slide-content.column @media only screen and (max-width: 768px) margin-bottom: -10vw!important + @media only screen and (max-width: 500px) + margin-bottom: 0!important +.slider-img-container + @media only screen and (max-width: 500px) + display none +.arrow + @media only screen and (max-width: 500px) + display none + +.mobile-slider + @media only screen and (max-width: 500px) + background-image url("img/home-car.jpg") +.container + @media only screen and (max-width: 500px) + padding 0!important