Boris Waaub
65813b6520
- Replaced client logos in _index.md with new entries. - Updated testimonials section to improve clarity and relevance. - Enhanced feature descriptions in generation-documents.md, rapports-rgpd.md, rapports-statistiques.md, rendez-vous.md, suivi-accompagnements.md, suivi-decisions.md, and suivi-usagers.md for better user understanding. - Added new images to various feature sections to enrich visual content. - Introduced new sector pages for "Grandes Collectivités" and "Services et associations" with tailored content. - Updated CSS for better styling and responsiveness. - Improved carousel and client logos shortcode for better performance and visual appeal. - Removed outdated screenshots and replaced hero image with a new format.
122 lines
2.8 KiB
HTML
122 lines
2.8 KiB
HTML
{{/*
|
|
Hugo List to Carousel Partial
|
|
Source: https://hugocodex.org/add-ons/slider-carousel/
|
|
Author: Jeroen van der Schee
|
|
*/}}
|
|
|
|
{{ $id := printf "carousel-%d" (now.UnixNano) }}
|
|
<div id="{{ $id }}" class="carousel-container">
|
|
<div class="carousel-slides">
|
|
{{ range .images }}
|
|
<div class="carousel-slide">
|
|
<img src="{{ . }}" alt="Carousel image" loading="lazy" style="object-fit: contain;" />
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ if gt (len .images) 1 }}
|
|
<button class="carousel-prev" aria-label="Précédent">❮</button>
|
|
<button class="carousel-next" aria-label="Suivant">❯</button>
|
|
|
|
<div class="carousel-dots">
|
|
{{ range $i, $_ := .images }}
|
|
<span class="carousel-dot" data-index="{{ $i }}"></span>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<style>
|
|
.carousel-container {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.carousel-slides {
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-slide {
|
|
min-width: 100%;
|
|
transition: transform 0.5s ease;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.carousel-slide img {
|
|
max-width: 100%;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.carousel-prev,
|
|
.carousel-next {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border: none;
|
|
font-size: 2rem;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.carousel-prev {
|
|
left: 10px;
|
|
}
|
|
|
|
.carousel-next {
|
|
right: 10px;
|
|
}
|
|
|
|
.carousel-dots {
|
|
text-align: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.carousel-dot {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin: 0 4px;
|
|
background: #bbb;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carousel-dot.active {
|
|
background: #333;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var container = document.getElementById('{{ $id }}');
|
|
if (!container) return;
|
|
var slides = container.querySelectorAll('.carousel-slide');
|
|
var prevBtn = container.querySelector('.carousel-prev');
|
|
var nextBtn = container.querySelector('.carousel-next');
|
|
var dots = container.querySelectorAll('.carousel-dot');
|
|
var current = 0;
|
|
|
|
function showSlide(idx) {
|
|
slides.forEach(function (slide, i) {
|
|
slide.style.transform = 'translateX(' + (-100 * idx) + '%)';
|
|
});
|
|
dots.forEach(function (dot, i) {
|
|
dot.classList.toggle('active', i === idx);
|
|
});
|
|
current = idx;
|
|
}
|
|
prevBtn.addEventListener('click', function () {
|
|
showSlide((current - 1 + slides.length) % slides.length);
|
|
});
|
|
nextBtn.addEventListener('click', function () {
|
|
showSlide((current + 1) % slides.length);
|
|
});
|
|
dots.forEach(function (dot, i) {
|
|
dot.addEventListener('click', function () { showSlide(i); });
|
|
});
|
|
showSlide(0);
|
|
});
|
|
</script> |