From a5a9fb5dd75ca18b6ddc66a316f17618f46ae368 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 6 Sep 2019 19:24:09 +0200 Subject: [PATCH] wip #2747 @1 --- public/_modules/home-slider/style.styl | 2 +- public/images/carrousel/home-arrow-left.svg | 8 ++ public/images/carrousel/home-arrow-right.svg | 8 ++ resources/js/carrousel.js | 78 +++++------ resources/styles/components/carrousel.styl | 135 +++++++++++++++++++ resources/views/pages/home.blade.php | 88 +++++++----- 6 files changed, 248 insertions(+), 71 deletions(-) create mode 100644 public/images/carrousel/home-arrow-left.svg create mode 100644 public/images/carrousel/home-arrow-right.svg create mode 100644 resources/styles/components/carrousel.styl diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl index bd731d4..56c628d 100644 --- a/public/_modules/home-slider/style.styl +++ b/public/_modules/home-slider/style.styl @@ -119,4 +119,4 @@ img .text-block @media (max-width: 769px) - padding 0 5vw!important \ No newline at end of file + padding 0 5vw!important diff --git a/public/images/carrousel/home-arrow-left.svg b/public/images/carrousel/home-arrow-left.svg new file mode 100644 index 0000000..1e20da7 --- /dev/null +++ b/public/images/carrousel/home-arrow-left.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/carrousel/home-arrow-right.svg b/public/images/carrousel/home-arrow-right.svg new file mode 100644 index 0000000..5a2722b --- /dev/null +++ b/public/images/carrousel/home-arrow-right.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/resources/js/carrousel.js b/resources/js/carrousel.js index fc68dcc..8ac09e2 100644 --- a/resources/js/carrousel.js +++ b/resources/js/carrousel.js @@ -1,13 +1,20 @@ import TweenMax from "gsap/TweenMax"; +import TimelineMax from "gsap/TimelineMax"; +import * as Hammer from 'hammerjs'; + +window.Hammer = Hammer.default; (function ($) { function JQPMISlide(element) { + console.log(':))', element); this.element = element; this.pmiSlider = this.element.get(0); this.hammerSwipe = new Hammer(this.pmiSlider); this.index = 0; this.slideLength = this.element.find(".slide").length; + this.automode = true; + this.prevBtn = this.element.find(".home-arrow-left"); this.nextBtn = this.element.find(".home-arrow-right"); this.Delay = 1; @@ -23,7 +30,7 @@ import TweenMax from "gsap/TweenMax"; this.final = 'px 0px)'; this.container = this.element.find('.slider'); - this.hammerSwipe.get('swipe').set({ enable: true }); + this.hammerSwipe.get('swipe').set({enable: true}); this.initt(); }; @@ -47,12 +54,11 @@ import TweenMax from "gsap/TweenMax"; this.autoSlideDelay = 4; // automatic slideshow delay this.slideInterval = window.setTimeout(function () { $this.nextSlide(); - }, this.autoSlideDelay*1000); + }, this.autoSlideDelay * 1000); this.resize(); this.initSwipeEvent(); this.enableArrows(); - this.automaticSlideshow(); this.indicator(); }, @@ -107,9 +113,11 @@ import TweenMax from "gsap/TweenMax"; $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); + if ($this.automode) { + $this.slideInterval = setTimeout(function () { + $this.nextSlide(); + }, $this.autoSlideDelay * 1000); + } $this.enableArrows(); // when animation is finished we reactivate click event $this.automaticSlideshow(); @@ -157,8 +165,7 @@ import TweenMax from "gsap/TweenMax"; tl.set($this.currentSlideIndex, {zIndex: 0}); tl.set($this.currentContainerImg, {x: 0}); - } - else { + } else { let tl2 = new TimelineMax({onComplete: $this.finishAnimation}); $this.percent = 100 * direction; @@ -211,63 +218,58 @@ import TweenMax from "gsap/TweenMax"; this.goToSlide(nextindex, direction); }, - indicator: function(){ - let $this= this; - $('.slider-position').on('click',function () { + indicator: function () { + let $this = this; + $('.slider-position').on('click', function () { let direction = 1; - let nextPosition= $(this).data('position'); + let nextPosition = $(this).data('position'); let currentPosition = $this.index; clearTimeout($this.slideInterval); - if (currentPosition< nextPosition){ + if (currentPosition < nextPosition) { direction = 1; - } - else if(currentPosition > nextPosition){ + } else if (currentPosition > nextPosition) { direction = -1; - } - else if(currentPosition == nextPosition){ + } else if (currentPosition == nextPosition) { return false; } - $this.goToSlide(nextPosition,direction); - }); - }, - - automaticSlideshow:function(){ - - let $this = this; - this.element.find(".arrow").on('click',function () { - // window.clearTimeout($this.slideInterval); - window.clearTimeout($this.slideInterval); - - alert($this.slideInterval); + $this.goToSlide(nextPosition, direction); }); }, - initSwipeEvent: function (){ + initSwipeEvent: function () { let $this = this; - this.hammerSwipe.on('swiperight', function() { + this.hammerSwipe.on('swiperight', function () { + $this.endAutomode(); $this.prevSlide(); - clearTimeout($this.slideInterval); + }); - this.hammerSwipe.on('swipeleft', function() { + this.hammerSwipe.on('swipeleft', function () { + $this.endAutomode(); $this.nextSlide(); - clearTimeout($this.slideInterval); }); }, - enableArrows: function() { + endAutomode:function(){ + this.automode=false; + clearTimeout(this.slideInterval); + }, + + enableArrows: function () { let $this = this; - this.element.find(".arrow.next").on('click',function () { + this.element.find(".arrow.next").on('click', function () { + $this.endAutomode(); $this.nextSlide(); }); - this.element.find(".arrow.prev").on('click',function () { + this.element.find(".arrow.prev").on('click', function () { + $this.endAutomode(); $this.prevSlide(); }); }, - disableArrows: function() { + disableArrows: function () { this.element.find(".arrow.next").off(); this.element.find(".arrow.prev").off(); } diff --git a/resources/styles/components/carrousel.styl b/resources/styles/components/carrousel.styl new file mode 100644 index 0000000..12825db --- /dev/null +++ b/resources/styles/components/carrousel.styl @@ -0,0 +1,135 @@ +.slider-container + + + $h3 = 24px + $h2 = 36px + $barlow = 'Barlow', sans-serif + $muli = 'Muli', sans-serif + $dark = #6B7287 + $lightgrey = #F7F8FC + $darkblue = #152F4E + $lightblue = #0EAADA + $verylightgrey = #E7E9F3 + $controlSize = 60px; + + .column-wrapper.hide + display none + + .arrow + cursor: pointer + + .home-arrow-left + position: absolute; + top: 50%; + left: 2%; + z-index 99 + @media (max-width 769px) + top: 88.5% + left 5% + + .home-arrow-right + position: absolute; + top: 50%; + right: 2%; + z-index 99 + @media (max-width 769px) + top: 88.5% + right 5% + + .column-wrapper.active + display grid + + .slide-img + position: absolute + width: 100%; + overflow: hidden; + + .img-slider + position: absolute + left: 50% + transform: translateX(-50%) + + .slider + width: 100% + position relative + height 80vh + @media (max-width 769px) + overflow hidden + + .slide + width: 100% + min-height: 100% + @media (max-width 769px) + overflow hidden + + .slide-mask + overflow hidden + height 100% + position relative + + .slider-indicator + position absolute + bottom 60px + @media (max-width 769px) + left: 50% + transform: translateX(-50%) + ul + display flex + align-items: center; + @media (max-width 769px) + padding-left: 0 !important + + .slider-position + width: 6px + height 6px + background: #6B7287 + border-radius 50% + margin-right: 10px + transition all 400ms ease-in-out + cursor: pointer + + .active-indicator + width: 10px + height 10px + background: white + transition all 400ms ease-in-out + + .slide.column-wrapper + @media only screen and (max-width: 768px) + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + grid-auto-flow: column; + + img + max-width unset !important + + .slide-img-container + @media (max-width: 769px) + display none + + .mobile-bg + position: absolute + background-repeat no-repeat + background-size cover + top: 0 + left: 0 + right: 0 + bottom: 0 + opacity: 0.3 + height 110% + + @media only screen and (min-width: 769px) + display: none + + + .slide-txt + @media only screen and (max-width: 769px) + margin-bottom 0 !important + + .text-block + @media (max-width: 769px) + padding 0 5vw !important + + @media only screen and (max-width: 769px) + padding 0 !important + diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php index d93f5b4..b5c1fc8 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -4,38 +4,59 @@ {{-- Breadcrumbs disabled on home... --}} @endsection -@section('content') - +@push('scripts') + +@endpush +@section('content') {{-- Slider --}} - @foreach($page->get('slideshow') as $slide) - - - - - - - -

- {!! nl2br($slide['text']) !!} -

- -

- -

- - - - - - - - +
+
+
+ + +
+
+ @foreach($page->get('slideshow') as $i=>$slide) +
+ + +
+ + +

+ {!! nl2br($slide['text']) !!} +

+

+ +

+ + + +
+
+ +
+
+ - - - - @endforeach +
+ @endforeach +
+
    + @foreach($page->get('slideshow') as $i=>$slide) +
  • + @endforeach +
+
+
+
+
{{-- Intro text --}} @intro(['padding' => 'pt-5v pb-4v']) @@ -59,7 +80,8 @@
- +

{{ $highlight['title'] }}

 @@ -79,7 +101,8 @@
- {{$highlight['image']}} + {{$highlight['image']}}

{{ $highlight['title'] }}

 @@ -128,7 +151,8 @@