81 lines
2.6 KiB
HTML
81 lines
2.6 KiB
HTML
{{/*
|
|
Usage :
|
|
{{< features-carousel title="Vos fonctionnalités clés" >}}
|
|
{
|
|
"features": [
|
|
{
|
|
"title": "Performance",
|
|
"titleBtn": "Performance",
|
|
"description": "Leverage Hugo's blazing-fast build times and optimized output.",
|
|
"badge": "Performance",
|
|
"badgeColor": "#2563eb",
|
|
"image": "/images/feature-1.svg",
|
|
"buttonText": "Learn More",
|
|
"buttonLink": "/features/performance/",
|
|
"features": "Sub-second page loads,Optimized assets,Minimal JavaScript,CDN-ready output",
|
|
"imagePosition": "right"
|
|
},
|
|
]
|
|
}
|
|
{{< /features-carousel >}}
|
|
*/}}
|
|
|
|
{{ $title := .Get "title" | default "" }}
|
|
{{ $data := .Inner | transform.Unmarshal }}
|
|
{{ $background_color := .Get "background-color" }}
|
|
<section id="features-carousel" class="section{{ if not $background_color }} bg-gray-50{{ end }}" {{ if $background_color }}style="background-color:{{ $background_color }};"{{ end }}>
|
|
<div class="container">
|
|
{{ if $title }}
|
|
<h1 class="text-3xl font-bold mb-4 text-center">{{ $title }}</h1>
|
|
{{ end }}
|
|
<div class="features-carousel__nav"></div>
|
|
<div class="features-carousel__slides">
|
|
{{ range $i, $f := $data.features }}
|
|
<div class="feature" data-title-btn="{{ $f.titleBtn }}">
|
|
{{ partial "shortcodes/feature.html" (dict
|
|
"title" $f.title
|
|
"titleBtn" $f.titleBtn
|
|
"description" $f.description
|
|
"badge" $f.badge
|
|
"badgeColor" $f.badgeColor
|
|
"image" $f.image
|
|
"buttonText" $f.buttonText
|
|
"buttonLink" $f.buttonLink
|
|
"features" $f.features
|
|
"imagePosition" $f.imagePosition
|
|
) }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
(function() {
|
|
const carousel = document.getElementById('features-carousel');
|
|
if (!carousel) return;
|
|
const slides = carousel.querySelectorAll('.feature');
|
|
const nav = carousel.querySelector('.features-carousel__nav');
|
|
let current = 0;
|
|
|
|
slides.forEach((slide, i) => {
|
|
const btn = document.createElement('button');
|
|
btn.innerText = slide.dataset.titleBtn || `Feature ${i+1}`;
|
|
btn.onclick = () => {
|
|
current = i;
|
|
showSlide(current);
|
|
};
|
|
nav.appendChild(btn);
|
|
});
|
|
|
|
function showSlide(idx) {
|
|
slides.forEach((slide, i) => {
|
|
slide.style.display = i === idx ? 'block' : 'none';
|
|
});
|
|
Array.from(nav.children).forEach((btn, i) => {
|
|
btn.classList.toggle('active', i === idx);
|
|
});
|
|
}
|
|
|
|
showSlide(current);
|
|
})();
|
|
</script> |