107 lines
5.9 KiB
PHP
107 lines
5.9 KiB
PHP
@php
|
|
$slides = $model->data['testimonials_items']['value'];
|
|
@endphp
|
|
<section class="position-relative bg-white-wood-big-reverse pt-lg-5 pt-1" id="testimonial-section">
|
|
<div class="container-fluid">
|
|
<h2 class="fw-bold text-uppercase mb-5 text-center">
|
|
{{ $model->data['testimonials_title']['value'] }}
|
|
</h2>
|
|
<div class="d-flex justify-content-center mb-5 flex-wrap gap-4" id="swiper-anecdote-tdf-badges">
|
|
@foreach ($slides as $index => $slide)
|
|
<button class="btn text-uppercase fs-5 fw-medium text-secondary px-4 py-1 shadow-none" data-slide-index="{{ $index }}">
|
|
{{ $slide['title'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center mt-3">
|
|
<div class="col-12 col-xxl-10 position-relative mb-2 overflow-hidden p-0">
|
|
<div class="swiper swiper-anecdote-tdf container" id="swiper-anecdote-tdf">
|
|
<div class="swiper-wrapper w-fit">
|
|
@foreach ($slides as $slide)
|
|
<div class="swiper-slide px-md-0 px-4">
|
|
<div class="row align-items-center mb-4">
|
|
<div class="col-md-5">
|
|
<div class="position-relative line-border-small bg-white p-2">
|
|
<img class="img-fluid position-relative line-border-small w-100" src="{{ asset($slide['picture']) }}"
|
|
title="{{ $slide['picture_title'] }}" alt="{{ $slide['picture_alt'] }}">
|
|
</div>
|
|
<div class="ms-md-5 mt-lg-4 mt-0 mb-4 mb-lg-0">
|
|
<small>{{ $slide['picture_author'] }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="d-flex align-items-end gap-2">
|
|
<h5 class="fs-2 text-uppercase fw-semibold">{{ $slide['title'] }}</h5>
|
|
@if (!empty($slide['subtitle']))
|
|
<div class="fs-3 text-muted f-bakerie-rough mb-2">{{ $slide['subtitle'] }}</div>
|
|
@endif
|
|
</div>
|
|
<div class="fs-5">
|
|
{!! clean($slide['description']) !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-3 position-relative line-border-large bg-white p-5">
|
|
<div>
|
|
<p class="text-uppercase">
|
|
<strong>{{ $slide['subtitle_2'] }} <span class="mb-0 bg-secondary px-3 py-1 text-white">
|
|
{{ $slide['title'] }}</span></strong>
|
|
<br />
|
|
<br />
|
|
</p>
|
|
{!! clean($slide['description_2']) !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="swiper-button swiper-button-prev-custom swiper-anecdote-tdf-button-prev rounded-circle z-1 bg-secondary border-0">
|
|
<img src="{{ Vite::asset('resources/assets/images/common/arrow-white.svg') }}"
|
|
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
|
|
</button>
|
|
<button
|
|
class="swiper-button swiper-button-next-custom swiper-anecdote-tdf-button-next rounded-circle z-1 bg-secondary border-0">
|
|
<img src="{{ Vite::asset('resources/assets/images/common/arrow-white.svg') }}"
|
|
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script nonce="{{ $nonce ?? '' }}">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const interval = setInterval(() => {
|
|
const swiperInstance = document.querySelector('#swiper-anecdote-tdf')?.swiper;
|
|
if (swiperInstance) {
|
|
clearInterval(interval);
|
|
|
|
const badgeButtons = document.querySelectorAll('#swiper-anecdote-tdf-badges button');
|
|
badgeButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const index = parseInt(this.getAttribute('data-slide-index'));
|
|
swiperInstance.slideTo(index);
|
|
});
|
|
});
|
|
swiperInstance.on('slideChange', function() {
|
|
updateActiveBadge(swiperInstance.activeIndex);
|
|
});
|
|
|
|
function updateActiveBadge(activeIndex) {
|
|
badgeButtons.forEach((button, index) => {
|
|
if (index === activeIndex) {
|
|
button.classList.remove('text-secondary');
|
|
button.classList.add('btn-primary', 'text-white');
|
|
} else {
|
|
button.classList.add('text-secondary');
|
|
button.classList.remove('btn-primary', 'text-white');
|
|
}
|
|
});
|
|
}
|
|
updateActiveBadge(swiperInstance.activeIndex);
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|