wip #2747 @7

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index 4714a4fa9e07fb6fc87025530542137388cca500..1e69e928627def5693f6d266c15c168a0930c51a 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -31,10 +31,13 @@
 
 <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" disabled="disabled" alt="">
-        <div data-slide="1" class="column-wrapper active hide">
-            <div class="column pt-2v pr-1v pb-2v">
+
+        <div class="slider-control">
+            <img class="arrow prev home-arrow-left" src="img/home-arrow-left.svg" alt="">
+            <img class="arrow next home-arrow-right" src="img/home-arrow-right.svg" disabled="disabled" alt="">
+        </div>
+        <div data-slide="1" class="column-wrapper slide active hide ">
+            <div class="column pt-2v pr-1v pb-2v slide-txt">
                 <div class="text-block  text-block-default-padding pl-2v">
                     <h2 class="h1 text-inherit">Wheel Force Transducer</h2>
                     <div class="text-block-body">
@@ -53,15 +56,15 @@
                     </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://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="column overlap-bottom relative slide-mask">
+                <div class="bg-image h-full bg-cover bg-no-repeat slide-img" 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>
                 </div>
             </div>
         </div>
-        <!-- content mask -->
-       <div data-slide="2" class="column-wrapper hide">
-            <div class="column pt-2v pr-1v pb-2v">
+        <!-- hidden content-->
+        <div data-slide="2" class="column-wrapper slide hide ">
+            <div class="column pt-2v pr-1v pb-2v slide-txt">
                 <div class="text-block  text-block-default-padding pl-2v">
                     <h2 class="h1 text-inherit">slide suivante</h2>
                     <div class="text-block-body">
@@ -80,14 +83,14 @@
                     </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://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 class="column overlap-bottom relative slide-mask">
+                <div class="bg-image h-full bg-cover bg-no-repeat slide-img" 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 data-slide="3" class="column-wrapper slide hide">
+            <div class="column pt-2v pr-1v pb-2v slide-txt">
                 <div class="text-block  text-block-default-padding pl-2v">
                     <h2 class="h1 text-inherit">Lorem ipsum</h2>
                     <div class="text-block-body">
@@ -108,8 +111,36 @@
                     </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 class="column overlap-bottom relative slide-mask">
+                <div class="bg-image h-full bg-cover bg-no-repeat slide-img" 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 data-slide="4" class="column-wrapper slide hide">
+            <div class="column pt-2v pr-1v pb-2v slide-txt">
+                <div class="text-block  text-block-default-padding pl-2v">
+                    <h2 class="h1 text-inherit">Lorrefdcem ipsfdcum</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 relative slide-mask">
+                <div class="bg-image h-full bg-cover bg-no-repeat slide-img" style="background-image: url(&quot;https://www.w3schools.com/w3css/img_lights.jpg&quot;); background-position: center center;"><div class="bg-image-sizer" style="padding-bottom: 110.417%;">
                 </div>
                 </div>
             </div>

diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
index 3eb0a3864b4b6698afae81e090a6fa74ce4d77e4..9fe4363cd54adcab5ea7812097fd3409a3298cad 100644 (file)
--- a/public/_modules/home-slider/slider.js
+++ b/public/_modules/home-slider/slider.js
@@ -1,47 +1,76 @@
 // jshint ignore: start
 
 let index = $(".column-wrapper.active").index(".column-wrapper"),
-    stepsCount = $(".column-wrapper").length,
+    slideLength = $(".slide").length,
     prevBtn = $(".home-arrow-left"),
     nextBtn = $(".home-arrow-right");
+let slides = document.querySelectorAll('.slide');
 
-// Slider variables
 let animationDuration = 0;
-let delayBetweenAnim = 2000;
+let delayBetweenAnim = 0;
 let mouvement = 0;
 
-prevBtn.click(function() {
-    nextBtn.prop("disabled", false);
+    prevBtn.click(function() {
+        nextBtn.prop("disabled", false);
 
-    if (index > 0) {
-        index--;
-        $(".column-wrapper").removeClass("active").eq(index).addClass("active");
-    };
+        if (index > 0) {
+            index--;
+            $(".column-wrapper").removeClass("active").eq(index).addClass("active");
+        };
 
-    if (index === 0) {
-        $(this).prop("disabled", true);
-    }
-});
+        if (index === 0) {
+            $(this).prop("disabled", true);
+        }
+    });
 
 nextBtn.click(function() {
     setTimeout(function () {
-    prevBtn.prop("disabled", false);
+        prevBtn.prop("disabled", false);
+
 
-    if (index < stepsCount - 1) {
+        if (index < slideLength - 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
+        //     if($('div.slide').hasClass('active')){
+        //     $('div.slide.active').removeClass('active');
+        // }
 
-        console.log(index);
-    };
+
+        };
     }, delayBetweenAnim);
 
 
-    if (index === stepsCount - 1) {
+    if (index === slideLength - 1) {
         $(this).prop("disabled", true);
     }
-});
\ No newline at end of file
+});
+
+//TODO clip-path animation, movement text block animation
+
+// modifications slider
+
+// $('.slide').each(function (i) {
+//
+//     console.log(i);
+//     let that = $(this);
+//
+//     $('.home-arrow-right').on('click',function () {
+//         // that.prev().removeClass('active');
+//         // $('div.slide').next(that).addClass('active');
+//         //
+//         // // that.closest(that).addClass('active');
+//         //
+//         // // console.log(that);
+//         // // that.prev(that).addClass('active');
+//         if(that.hasClass('active')){
+//             $('div.slide.active').removeClass('active');
+//         }
+//         else{
+//             $('div.slide').next('.active').addClass('active');
+//         }
+//
+//     });
+//
+// });
\ No newline at end of file