Pierre-Olivier Mercier
c9bd6518cc
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
98 lines
2.9 KiB
HTML
98 lines
2.9 KiB
HTML
{{ if isset .Site.Params "carousel" }} {{ if gt (len .Site.Params.carousel) 0 }}
|
|
<div class="carousel-wrap position-relative">
|
|
<button
|
|
class="carousel-btn carousel-btn-left"
|
|
type="button"
|
|
aria-label="Défiler à gauche"
|
|
data-carousel-dir="-1"
|
|
>
|
|
<i class="bi bi-chevron-left"></i>
|
|
</button>
|
|
|
|
<section
|
|
id="screenshots"
|
|
class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
|
|
style="
|
|
background-color: var(--hd-plum-600);
|
|
gap: 1em 1em;
|
|
overflow-x: scroll;
|
|
"
|
|
>
|
|
{{ range sort .Site.Params.carousel "weight" }}
|
|
<figure class="my-5 me-5 text-center" style="min-width: 65vw">
|
|
<a href="{{ .image }}">
|
|
<img
|
|
class="rounded img-thumbnail"
|
|
src="{{ .image }}"
|
|
alt="{{ .title }}"
|
|
loading="lazy"
|
|
style="max-height: 80vh"
|
|
/>
|
|
</a>
|
|
<figcaption class="mt-2 text-center">
|
|
{{ .description | markdownify }}
|
|
</figcaption>
|
|
</figure>
|
|
{{ end }}
|
|
</section>
|
|
|
|
<button
|
|
class="carousel-btn carousel-btn-right"
|
|
type="button"
|
|
aria-label="Défiler à droite"
|
|
data-carousel-dir="1"
|
|
>
|
|
<i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
.carousel-wrap .carousel-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
background: var(--hd-plum-600);
|
|
border: 2px solid rgba(255, 255, 255, 0.85);
|
|
border-radius: 50%;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
|
cursor: pointer;
|
|
font-size: 1.4rem;
|
|
color: white;
|
|
transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
|
|
}
|
|
|
|
.carousel-wrap .carousel-btn:hover {
|
|
background: var(--hd-plum-700, #4a1f5c);
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
|
|
transform: translateY(-50%) scale(1.08);
|
|
}
|
|
|
|
.carousel-wrap .carousel-btn-left {
|
|
left: 0.5rem;
|
|
}
|
|
|
|
.carousel-wrap .carousel-btn-right {
|
|
right: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
var scroller = document.getElementById("screenshots");
|
|
if (!scroller) return;
|
|
var buttons = scroller.parentNode.querySelectorAll(".carousel-btn");
|
|
buttons.forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
var dir = parseInt(btn.getAttribute("data-carousel-dir"), 10);
|
|
scroller.scrollBy({ left: dir * scroller.clientWidth * 0.7, behavior: "smooth" });
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{{ end }} {{ end }}
|