wip #2747 @7

diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
index 029ad7c932a69886b46ec03339435aa494875fbe..c3281459fe509e66ff98da4cfc656d6e9a00ceed 100644 (file)
--- a/public/_modules/home-slider/index.html
+++ b/public/_modules/home-slider/index.html
@@ -75,7 +75,7 @@
                 <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img ">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
-                        <img class="img-slider" draggable="false" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
+                        <img class="img-slider" draggable="false" ondragstart="return false;" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
                         <!--</div>-->
                     </div>
                 </div>
@@ -111,7 +111,7 @@
                     <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
-                        <img class="img-slider" draggable="false" src="https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg" alt="">
+                        <img class="img-slider" draggable="false" ondragstart="return false;" src="https://www.sciencesetavenir.fr/assets/img/2019/04/10/cover-r4x3w1000-5cadebdd93968-trou-noir-galaxie.jpg" alt="">
 
                         <!--</div>-->
                     </div>
@@ -148,7 +148,7 @@
                     <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
-                        <img class="img-slider" draggable="false" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
+                        <img class="img-slider" draggable="false" ondragstart="return false;" src="https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg" alt="">
 
                         </div>
                     </div>
@@ -184,7 +184,7 @@
                     <div class="slide-mask">
                     <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
                         <!--<div class="bg-image-sizer" style="padding-bottom: 110.417%;">-->
-                        <img class="img-slider" draggable="false" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
+                        <img class="img-slider" draggable="false" ondragstart="return false;" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
                         </div>
                     </div>
                 </div>

diff --git a/public/_modules/home-slider/slider-jq.js b/public/_modules/home-slider/slider-jq.js
index d429bf6ce20e359c0ad97b5850bec210bd3a7465..def116a20061981755d3d83a3c7641459a2ba505 100644 (file)
--- a/public/_modules/home-slider/slider-jq.js
+++ b/public/_modules/home-slider/slider-jq.js
@@ -23,7 +23,6 @@
         this.final = 'px 0px)';
 
         this.container = this.element.find('.slider');
-
         this.hammerSwipe.get('swipe').set({ enable: true });
         this.initt();
     };
@@ -44,10 +43,16 @@
             $(window).on('resize', function () {
                 $this.resize();
             });
+
+            this.autoSlideDelay = 4; // automatic slideshow delay
+            this.slideInterval = window.setTimeout(function () {
+                $this.nextSlide();
+            }, this.autoSlideDelay*1000);
+
             this.resize();
             this.initSwipeEvent();
             this.enableArrows();
-            // this.automaticSlideshow();
+            this.automaticSlideshow();
             this.indicator();
         },
 
@@ -102,7 +107,12 @@
                 $this.hammerSwipe.get('swipe').set({enable: true}); // swipe functionality is now reactivate
                 $this.currentSlideIndex.removeClass('active').eq($this.index);
 
+                $this.slideInterval = setTimeout(function () {
+                    $this.nextSlide();
+                }, $this.autoSlideDelay*1000);
+
                 $this.enableArrows(); // when animation is finished we reactivate click event
+                $this.automaticSlideshow();
                 TweenMax.set($this.element.find('.slide-img'), {
                     clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
                     ease: Power3.easeOut
@@ -110,7 +120,7 @@
 
             };
 
-            if ($(window).width() > 768) {
+            if ($(window).outerWidth() > 768) {
                 TweenMax.set($this.element.find('.slide-img'), {
                     clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
                     ease: Power3.easeOut
@@ -204,57 +214,45 @@
         indicator: function(){
             let $this= this;
             $('.slider-position').on('click',function () {
-                let direction = -1;
-                let pos = $(this).data('position');
+                let direction = 1;
+                let nextPosition= $(this).data('position');
+                let currentPosition = $this.index;
+
+                clearTimeout($this.slideInterval);
 
-                if (pos<direction){
-                    this.direction = -1;
+                if (currentPosition< nextPosition){
+                    direction = 1;
                 }
-                else if(pos>direction){
-                    this.direction = 1;
+                else if(currentPosition > nextPosition){
+                    direction = -1;
                 }
-                else if(pos=direction){
-                    this.goToSlide(pos,direction).off();
+                else if(currentPosition == nextPosition){
+                    return false;
                 }
-                console.log(pos,direction);
-
-                // DETERMINER la direction en fonction de la position
-                $this.goToSlide(pos,direction);
-                // console.log(direction);
+                $this.goToSlide(nextPosition,direction);
             });
         },
 
-        // autoSlide: function () {
-        //     let $this = this;
-        //
-        //   let myVar = setInterval(function () {
-        //         $this.nextSlide();
-        //         }, 4000);
-        // },
-
-        // automaticSlideshow:function(){
-        //     // this.autoSlide();
-        //
-        //     let $this = this;
-        //
-        //     let myVar = setInterval(function () {
-        //         $this.nextSlide();
-        //     }, 4000);
-        //
-        //     $(".arrow").on('click',function () {
-        //         // $this.autoSlide.off();
-        //         // clearInterval(myVar);
-        //         // alert('test');
-        //   })
-        // },
+        automaticSlideshow:function(){
+
+            let $this = this;
+            this.element.find(".arrow").on('click',function () {
+                // window.clearTimeout($this.slideInterval);
+                window.clearTimeout($this.slideInterval);
+
+                alert($this.slideInterval);
+             });
+        },
 
         initSwipeEvent: function (){
             let $this = this;
             this.hammerSwipe.on('swiperight', function() {
                 $this.prevSlide();
+                clearTimeout($this.slideInterval);
             });
             this.hammerSwipe.on('swipeleft', function() {
                 $this.nextSlide();
+                clearTimeout($this.slideInterval);
             });
         },