feat(landing): add partners carousel

This commit is contained in:
Matthieu Bessat 2023-06-23 23:19:30 +02:00
parent c890ac388e
commit bbef275b3d
8 changed files with 160 additions and 10 deletions

View file

@ -7,7 +7,7 @@
<div class="cover__content">
<div class="cover__title-container">
<div class="page-container">
<h1 class="cover__title">Relevons notre Bethléem Normand</h1>
<h1 class="cover__title">Relevons notre Bethléem Normand !</h1>
</div>
</div>
</div>
@ -227,6 +227,7 @@
</div>
</section>
{{ $slides_count := 6 }}
<section class="carousel-container">
<div class="carousel" aria-label="Gallery">
@ -256,6 +257,63 @@
</aside>
</div>
</section>
<!-- {{ range $.Site.Data.partners.people }} -->
<!-- <li class="move-item"> -->
<!-- {{ .org }} -->
<!-- {{ .name }} {{ .quote }} -->
<!-- </li> -->
<!-- {{ end }} -->
{{ $slides_count := len $.Site.Data.partners.people }}
<section class="partners-container">
<div class="page-container">
<h2>Ils nous soutiennent</h2>
</div>
<div class="carousel" aria-label="Partners">
<ol class="carousel__viewport">
{{ range $index, $comment := $.Site.Data.partners.people }}
<li id="partners__slide{{ $index }}"
tabindex="0"
class="carousel__slide">
<div class="slide-content partner-comment__container">
<div class="partner-comment">
{{ $image := resources.Get (printf "images/partners/%s" $comment.image) }}
<a href="{{ $comment.org.website }}">
<img class="partner-comment__author-picture" alt="Photo d'un de nos soutiens" src="{{ $image.RelPermalink }}" />
</a>
<p class="partner-comment__quote">
{{ $comment.quote }}
</p>
<div class="partner-comment__author">
<div class="partner-comment__author-name">
{{ with $comment.name }}{{ . }}{{ end }} {{ with $comment.org.intro }}{{ . }}{{ end }} {{ $comment.org.name }}
</div>
</div>
</div>
</div>
<div class="carousel__snapper">
<a href="#partners__slide{{ partial "fullmod" (slice (sub $index 1) $slides_count) }}"
class="carousel__prev">Diapositive précédente</a>
<a href="#partners__slide{{ partial "fullmod" (slice (add $index 1) $slides_count) }}"
class="carousel__next">Diapositive suivante</a>
</div>
</li>
{{ end }}
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
{{ range $index, $s := seq $slides_count }}
<li class="carousel__navigation-item {{ if eq $index 0 }}enabled{{- end -}}">
<a href="#partners__slide{{ $index }}"
class="carousel__navigation-button">{{ $index }}ème diapositive</a>
</li>
{{ end }}
</ol>
</aside>
</div>
</section>
</main>
<div class="separation-section secondary-bg">