.text-block
@media (max-width: 769px)
- padding 0 5vw!important
\ No newline at end of file
+ padding 0 5vw!important
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+ <g id="Groupe_8" data-name="Groupe 8" transform="translate(886.414 602) rotate(180)">
+ <g id="Groupe_6" data-name="Groupe 6" transform="translate(849 577)">
+ <path id="Tracé_16" data-name="Tracé 16" d="M3275.773-724.775l12,12-12,12" transform="translate(-3251.773 724.775)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ <line id="Ligne_2" data-name="Ligne 2" x1="36.001" transform="translate(0 12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+ <g id="Groupe_7" data-name="Groupe 7" transform="translate(-848 -576)">
+ <g id="Groupe_6" data-name="Groupe 6" transform="translate(849 577)">
+ <path id="Tracé_16" data-name="Tracé 16" d="M3275.773-724.775l12,12-12,12" transform="translate(-3251.773 724.775)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ <line id="Ligne_2" data-name="Ligne 2" x1="36.001" transform="translate(0 12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ </g>
+ </g>
+</svg>
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;
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();
};
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();
},
$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();
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;
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();
}
--- /dev/null
+.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
+
{{-- Breadcrumbs disabled on home... --}}
@endsection
-@section('content')
-
+@push('scripts')
+ <script src="{{ mix('/js/home.js') }}"></script>
+@endpush
+@section('content')
{{-- Slider --}}
- @foreach($page->get('slideshow') as $slide)
- <full-width class="bg-navy text-white antialiased" padding="pt-1v">
- <content>
- <columns>
- <column class="pt-2v pr-1v pb-2v">
-
- <text-block :title="$slide['title']" title-class="h1 text-inherit">
-
- <p>
- {!! nl2br($slide['text']) !!}
- </p>
-
- <p>
- <link-button :data="$slide['button']"/>
- </p>
-
- </text-block>
-
- </column>
-
- <column class="overlap-bottom md:-mr-2v sm:-ml-2v sm:mb-0">
- <flexible-image :src="$page->getImageURLByCollection($slide['image'])"/>
- </column>
+ <section class="pt-1v bg-navy text-white antialiased">
+ <div class="container slider-container">
+ <div class="slider-control">
+ <img class="arrow prev home-arrow-left" src="{{asset('images/carrousel/home-arrow-left.svg')}}" alt="">
+ <img class="arrow next home-arrow-right" src="{{asset('images/carrousel/home-arrow-right.svg')}}"
+ alt="">
+ </div>
+ <div id="pmiSlider" class="slider relative">
+ @foreach($page->get('slideshow') as $i=>$slide)
+ <div data-slide="{{$i+1}}"
+ class="column-wrapper absolute slide @if($i==0) active @else hide @endif">
+
+ <column class="slide-content pt-2v pr-1v pb-2v">
+ <div class="mobile-bg"
+ style="background-image: url({{$page->getImageURLByCollection($slide['image'])}})"></div>
+
+ <text-block :title="$slide['title']" title-class="h1 text-inherit">
+ <p>
+ {!! nl2br($slide['text']) !!}
+ </p>
+ <p>
+ <link-button :data="$slide['button']"/>
+ </p>
+ </text-block>
+ </column>
+ <column
+ class="overlap-bottom md:-mr-2v sm:-ml-2v sm:mb-0 slide-content slide-img-container relative">
+ <div class="slide-mask">
+ <div class="bg-image h-full bg-cover bg-no-repeat slide-img">
+ <img class="img-slider" draggable="false" ondragstart="return false;"
+ src="{{$page->getImageURLByCollection($slide['image'])}}" alt="">
+ </div>
+ </div>
+ </column>
- </columns>
- </content>
- </full-width>
- @endforeach
+ </div>
+ @endforeach
+ <div class="slider-indicator">
+ <ul class="pl-2v">
+ @foreach($page->get('slideshow') as $i=>$slide)
+ <li class="slider-position @if($i==0) active-indicator @endif" data-position="{{$i}}"></li>
+ @endforeach
+ </ul>
+ </div>
+ </div>
+ </div>
+ </section>
{{-- Intro text --}}
@intro(['padding' => 'pt-5v pb-4v'])
<a class="animated-underline partial-underline flex flex-col justify-between w-full"
href="{{ $nav->getHrefById('product_type_'.$highlight['link']) }}">
<div class="flex items-center justify-center flex-grow">
- <img class="mb-4" src="{{ $page->getImageUrlByCollection($highlight['image']) }}">
+ <img class="mb-4"
+ src="{{ $page->getImageUrlByCollection($highlight['image']) }}">
</div>
<p class="text-lg text-navy font-display font-medium">{{ $highlight['title'] }}</p>
</a>
<a class="animated-underline partial-underline flex flex-col justify-between w-full"
href="{{ $nav->getHrefById('product_type_'.$highlight['link']) }}">
<div class="flex items-center justify-center flex-grow">
- <img alt="{{$highlight['image']}}" class="mb-4" src="{{ $page->getImageURLByCollection($highlight['image']) }}">
+ <img alt="{{$highlight['image']}}" class="mb-4"
+ src="{{ $page->getImageURLByCollection($highlight['image']) }}">
</div>
<p class="text-lg text-navy font-display font-medium">{{ $highlight['title'] }}</p>
</a>
<article>
<a href="{{ $newsURL }}">
{{--Todo: handle missing images + get correct image size--}}
- <img class="mb-4" src="{{ $newsItem->getFirstMediaUrl($newsItem->image, 'index_thumb') }}"
+ <img class="mb-4"
+ src="{{ $newsItem->getFirstMediaUrl($newsItem->image, 'index_thumb') }}"
alt="{{ $newsItem->title }}">
</a>
<h4 class="font-display">{{ $newsItem->title }}</h4>
projects / pmi.git / commitdiff
