wip #2747 @5

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index 939f053afd793b80f7ef3d641b253922b3db6bb5..4714a4fa9e07fb6fc87025530542137388cca500 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -32,8 +32,8 @@
 <section class="pt-1v bg-navy text-white antialiased">
     <div class="container ">
         <img class="arrow home-arrow-left" src="img/home-arrow-left.svg" alt="">
-        <img class="arrow home-arrow-right" src="img/home-arrow-right.svg" alt="">
-        <div class="column-wrapper ">
+        <img class="arrow home-arrow-right" src="img/home-arrow-right.svg" disabled="disabled" alt="">
+        <div data-slide="1" class="column-wrapper active hide">
             <div class="column pt-2v pr-1v pb-2v">
                 <div class="text-block  text-block-default-padding pl-2v">
                     <h2 class="h1 text-inherit">Wheel Force Transducer</h2>
@@ -60,10 +60,10 @@
             </div>
         </div>
         <!-- content mask -->
-        <div class="column-wrapper hidden">
+       <div data-slide="2" class="column-wrapper hide">
             <div class="column pt-2v pr-1v pb-2v">
                 <div class="text-block  text-block-default-padding pl-2v">
-                    <h2 class="h1 text-inherit">Wheel Force Transducer</h2>
+                    <h2 class="h1 text-inherit">slide suivante</h2>
                     <div class="text-block-body">
                         <p>
                             Wheel Force Transducers (WFT) are used for measuring all wheel forces
@@ -81,15 +81,45 @@
                 </div>
             </div>
             <div class="column overlap-bottom">
-                <div class="bg-image h-full bg-cover bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg&quot;); background-position: center center;"><div class="bg-image-sizer" style="padding-bottom: 110.417%;">
+                <div class="bg-image h-full bg-cover bg-no-repeat" style="background-image: url(&quot;https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg&quot;); background-position: center center;"><div class="bg-image-sizer" style="padding-bottom: 110.417%;">
+                </div>
+                </div>
+            </div>
+        </div>
+       <div data-slide="3" class="column-wrapper hide">
+            <div class="column pt-2v pr-1v pb-2v">
+                <div class="text-block  text-block-default-padding pl-2v">
+                    <h2 class="h1 text-inherit">Lorem ipsum</h2>
+                    <div class="text-block-body">
+                        <p>
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                            quae ab illo inventore veritatis et quasi architecto beatae vitae
+                            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+                            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+                            eos qui ratione voluptatem sequi nesciunt.
+                        </p>
+                        <p>
+                            <a href="#test123" class="btn ">
+                                <span class="btn-text">Découvrir</span>
+                            </a>
+                        </p>
+                        <div class="pb-2v"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="column overlap-bottom">
+                <div class="bg-image h-full bg-cover bg-no-repeat" style="background-image: url(&quot;https://phototheque.pasteur.fr/images/slideshow/image-3.jpg&quot;); background-position: center center;"><div class="bg-image-sizer" style="padding-bottom: 110.417%;">
                 </div>
                 </div>
             </div>
         </div>
+
     </div>
 </section>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
 <script src="slider.js"></script>
 </body>
 </html>
\ No newline at end of file

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index d7325f07263bb011351435a826d31be5a455006c..3eb0a3864b4b6698afae81e090a6fa74ce4d77e4 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -1,5 +1,47 @@
 // jshint ignore: start
 
-$('.arrow').on('click',function () {
-   alert('test');
+let index = $(".column-wrapper.active").index(".column-wrapper"),
+    stepsCount = $(".column-wrapper").length,
+    prevBtn = $(".home-arrow-left"),
+    nextBtn = $(".home-arrow-right");
+
+// Slider variables
+let animationDuration = 0;
+let delayBetweenAnim = 2000;
+let mouvement = 0;
+
+prevBtn.click(function() {
+    nextBtn.prop("disabled", false);
+
+    if (index > 0) {
+        index--;
+        $(".column-wrapper").removeClass("active").eq(index).addClass("active");
+    };
+
+    if (index === 0) {
+        $(this).prop("disabled", true);
+    }
+});
+
+nextBtn.click(function() {
+    setTimeout(function () {
+    prevBtn.prop("disabled", false);
+
+    if (index < stepsCount - 1) {
+            index++;
+
+        //TODO animation when the first slide go out
+            // $(".column-wrapper").removeClass("active").eq(index);
+            $(".column-wrapper").removeClass("active").eq(index).addClass("active");
+
+        //TODO animation when the second slide appear
+
+        console.log(index);
+    };
+    }, delayBetweenAnim);
+
+
+    if (index === stepsCount - 1) {
+        $(this).prop("disabled", true);
+    }
 });
\ No newline at end of file

diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
index e40e44e833f0269b3216404212a083098cc467ff..1cb263331eda9186278a1c239b0835271c35e465 100644 (file)
--- a/public/_modules/home-slider/style.styl
+++ b/public/_modules/home-slider/style.styl
@@ -13,6 +13,8 @@ $verylightgrey =#E7E9F3
   box-sizing: border-box !important
   margin: 0
   font-family: $muli
+.column-wrapper.hide
+  display none
 .arrow
   cursor: pointer
 .home-arrow-left
@@ -22,4 +24,6 @@ $verylightgrey =#E7E9F3
 .home-arrow-right
   position: absolute;
   top: 50%;
-  right: 2%;
\ No newline at end of file
+  right: 2%;
+.column-wrapper.active
+  display grid