forge-joniko/ldc-volena
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add navigation arrows on mobile

Browse source
This commit is contained in:
Corentin Huet 2026-03-27 10:15:35 +01:00
parent cfffe97e06
commit 82abf4518e
3 changed files with 59 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/sass/fo/pages/_unveil.scss
View file

@ -16,6 +16,18 @@
}
}
.swiper-button-prev-custom {
top: 10%;
left: 1rem;
transform: translateY(-50%) rotate(180deg);
}
.swiper-button-next-custom {
top: 10%;
right: 1rem;
transform: translateY(-50%);
}
.history {
#historical-milestone-carousel {
.carousel-container {

6
resources/ts/fo/base/common.ts
View file

@ -159,11 +159,15 @@ document.addEventListener("DOMContentLoaded", function () {
},
},
"swiper-year": {
modules: [Keyboard],
modules: [Keyboard, Navigation],
grabCursor: true,
slidesPerView: 1.5,
centeredSlides: true,
slideToClickedSlide: true,
navigation: {
nextEl: ".year-next",
prevEl: ".year-prev",
},
keyboard: {
enabled: true,
},

74
resources/views/fo/pages/unveil.blade.php
View file

@ -189,6 +189,11 @@
@endphp
<div class="carousel slide carousel-fade pb-lg-5 pb-0" id="historical-milestone-carousel">
<div class="d-lg-none">
<button id="carousel-btn-prev" class="swiper-button swiper-button-prev-custom year-prev d-lg-none z-2"
data-bs-target="#historical-milestone-carousel" data-bs-slide-to="">
<img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<div class="carousel-indicators justify-content-between">
<div class="swiper swiper-year w-100 h-fit overflow-visible" id="swiper-year">
<div class="swiper-wrapper">
@ -210,6 +215,11 @@
</div>
</div>
</div>
<button id="carousel-btn-next" class="swiper-button swiper-button-next-custom year-next d-lg-none z-2"
data-bs-target="#historical-milestone-carousel" data-bs-slide-to="">
<img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>
<div class="d-none d-lg-block">
<div class="carousel-container justify-content-between">
@ -244,48 +254,48 @@
</div>
</div>
<div class="carousel-inner pb-lg-5 overflow-visible pb-4">
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
<div @class(['carousel-item bg-body', 'active' => $loop->first])>
{{-- We needed to include this picture twice because bootstrap took the picture height in its calculation for the carousel height --}}
@if ($historicalMilestoneModel->picture)
<img class="position-absolute picture d-none d-lg-block"
src="{{ $historicalMilestoneModel->picture }}"
title="{{ $historicalMilestoneModel->picture_title }}"
alt="{{ $historicalMilestoneModel->picture_alt }}">
@endif
<div class="row justify-content-center justify-content-lg-end">
<div class="col-12 col-lg-6">
<p class="year fw-bold text-{{ $colors[$loop->index % 4] }} pb-lg-0 mb-5 pb-5 text-center">
{{ $historicalMilestoneModel->year }}
</p>
</div>
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
<div @class(['carousel-item bg-body', 'active' => $loop->first])>
{{-- We needed to include this picture twice because bootstrap took the picture height in its calculation for the carousel height --}}
@if ($historicalMilestoneModel->picture)
<img class="position-relative picture d-lg-none" src="{{ $historicalMilestoneModel->picture }}"
<img class="position-absolute picture d-none d-lg-block"
src="{{ $historicalMilestoneModel->picture }}"
title="{{ $historicalMilestoneModel->picture_title }}"
alt="{{ $historicalMilestoneModel->picture_alt }}">
@endif
<div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
<div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
<p class="fw-bold fs-5">
{{ $historicalMilestoneModel->title }}
<div class="row justify-content-center justify-content-lg-end">
<div class="col-12 col-lg-6">
<p class="year fw-bold text-{{ $colors[$loop->index % 4] }} pb-lg-0 mb-5 pb-5 text-center">
{{ $historicalMilestoneModel->year }}
</p>
@if ($historicalMilestoneModel->text)
<p>
{{ $historicalMilestoneModel->text }}
</div>
@if ($historicalMilestoneModel->picture)
<img class="position-relative picture d-lg-none" src="{{ $historicalMilestoneModel->picture }}"
title="{{ $historicalMilestoneModel->picture_title }}"
alt="{{ $historicalMilestoneModel->picture_alt }}">
@endif
<div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
<div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
<p class="fw-bold fs-5">
{{ $historicalMilestoneModel->title }}
</p>
@if ($historicalMilestoneModel->text)
<p>
{{ $historicalMilestoneModel->text }}
</p>
@endif
</div>
@if ($historicalMilestoneModel->button_status)
<a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-inherit text-white"
href="{{ $historicalMilestoneModel->button_url }}"
@if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
{{ $historicalMilestoneModel->button_label }}
</a>
@endif
</div>
@if ($historicalMilestoneModel->button_status)
<a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-inherit text-white"
href="{{ $historicalMilestoneModel->button_url }}"
@if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
{{ $historicalMilestoneModel->button_label }}
</a>
@endif
</div>
</div>
</div>
@endforeach
@endforeach
</div>
</div>
</div>