pmi

- +

@@ -39,7 +49,10 @@

+ +

Wheel Force Transducer

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

@@ -73,6 +86,9 @@

+ +

slide suivante

@@ -91,7 +107,7 @@

@@ -105,6 +121,9 @@

+ +

Lorem ipsum

@@ -125,7 +144,7 @@

@@ -138,6 +157,9 @@

+ +

Lorrefdcem ipsfdcum

@@ -158,7 +180,7 @@

@@ -184,18 +206,6 @@ - + - - - \ 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 737b806..88f9b6c 100644 --- a/public/_modules/home-slider/slider.js +++ b/public/_modules/home-slider/slider.js @@ -4,8 +4,7 @@ let index = 0, slideLength = $(".slide").length, prevBtn = $(".home-arrow-left"), nextBtn = $(".home-arrow-right"), - Delay = 1, - isRunning = false; + Delay = 1; let getImg = new Image(); getImg.src = $('.img-slider').attr("src"); @@ -66,9 +65,6 @@ function resize() { function GotoSlide(nextindex, direction){ - if (!isRunning) { - isRunning = true; - let width = $('.slide-img').eq(index).width(), height = $('.slide-img').eq(index).height(); @@ -87,22 +83,11 @@ function GotoSlide(nextindex, direction){ // alert("finished"); currentSlideIndex.removeClass('active').eq(index); + enableArrows(); // when animation is finished we reactivate click event - /// 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; + // isRunning = false; }; console.log(nextindex, direction); @@ -130,23 +115,49 @@ function GotoSlide(nextindex, direction){ nextSlideIndex.addClass('active').eq(nextindex); - $('.arrow').off(); // disable click on arrows + disableArrows(); // disable click on arrows until animation finishes index=nextindex; - } else { - console.warn("animation still running!"); - return false; - } + // console.log(tl.duration()); // timeline duration } -$('.arrow').on('click',function () { - resize(); - if($(this).is('.next')){ - direction = 1; - } - else{ - direction=-1; - } - let nextindex = (index +direction + slideLength)% slideLength; - GotoSlide(nextindex,direction); -}); \ No newline at end of file +// +// 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; + + let nextindex = (index + direction + slideLength) % slideLength; + GotoSlide(nextindex, direction); + } + function prevSlide(){ + let direction = -1; + + let nextindex = (index + direction + slideLength) % slideLength; + GotoSlide(nextindex, direction); + } + + function enableArrows() { + $('.arrow.next').on('click', nextSlide); + $('.arrow.prev').on('click', prevSlide); + } + function disableArrows() { + $('.arrow.next').off(); + $('.arrow.prev').off(); + } + + enableArrows(); \ No newline at end of file diff --git a/public/_modules/home-slider/style.css b/public/_modules/home-slider/style.css index fe5aec3..2f5ccbf 100644 --- a/public/_modules/home-slider/style.css +++ b/public/_modules/home-slider/style.css @@ -53,10 +53,21 @@ position: absolute; bottom: 60px; } +@media (max-width: 769px) { + .slider-indicator { + left: 50%; + transform: translateX(-50%); + } +} .slider-indicator ul { display: flex; align-items: center; } +@media (max-width: 769px) { + .slider-indicator ul { + padding-left: 0 !important; + } +} .slider-position { width: 6px; height: 6px; @@ -81,33 +92,38 @@ img { max-width: unset !important; } -@media only screen and (max-width: 768px) { - .slide-content.column { - margin-bottom: -10vw !important; - } -} -@media only screen and (max-width: 500px) { - .slide-content.column { - margin-bottom: 0 !important; +@media (max-width: 769px) { + .slide-img-container { + display: none; } } -@media only screen and (max-width: 500px) { - .slider-img-container { +.mobile-bg { + position: absolute; + background-repeat: no-repeat; + background-size: cover; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.3; +} +@media only screen and (min-width: 769px) { + .mobile-bg { display: none; } } -@media only screen and (max-width: 500px) { - .arrow { - display: none; +@media only screen and (max-width: 769px) { + .slider-container { + padding: 0 !important; } } -@media only screen and (max-width: 500px) { - .mobile-slider { - background-image: url("img/home-car.jpg"); +@media only screen and (max-width: 769px) { + .slide-txt { + margin-bottom: 0 !important; } } -@media only screen and (max-width: 500px) { - .container { - padding: 0 !important; +@media (max-width: 769px) { + .text-block { + padding: 0 5vw !important; } } diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl index 58852b2..3018066 100644 --- a/public/_modules/home-slider/style.styl +++ b/public/_modules/home-slider/style.styl @@ -53,9 +53,15 @@ $controlSize= 60px; .slider-indicator position absolute bottom 60px + @media (max-width 769px) + left: 50% + transform: translateX(-50%) ul display flex - align-items center + align-items: center; + @media (max-width 769px) + padding-left: 0!important + .slider-position width: 6px height 6px @@ -68,6 +74,7 @@ $controlSize= 60px; height 10px background: white transition all 400ms ease-in-out + //.slider-control // @media only screen and (max-width: 768px) // display none @@ -79,21 +86,38 @@ $controlSize= 60px; img max-width unset!important -.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) +//.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 +.slide-img-container + @media (max-width: 769px) display none +//.arrow +// @media only screen and (max-width: 768px) +// display none + +.mobile-bg + position: absolute + background-repeat no-repeat + background-size cover + top: 0 + left: 0 + right: 0 + bottom: 0 + opacity: 0.3 + + @media only screen and (min-width: 769px) + 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) +.slider-container + @media only screen and (max-width: 769px) padding 0!important +.slide-txt + @media only screen and (max-width: 769px) + margin-bottom 0!important + +.text-block + @media (max-width: 769px) + padding 0 5vw!important \ No newline at end of file