GARAGENUM/ltqf
15
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases 1 Wiki Activity

add xxs and news carousel

Browse Source
This commit is contained in:
Florian du Garage Num 2023-12-22 11:53:55 +01:00
parent 06104fb29b
commit 86ea5724d8
1 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
layouts/index.html
View File

@ -8,11 +8,13 @@
<div id="galerie" class="carousel">
{{ $carouselImages := resources.Match "carousel/*"}}
{{ range $index, $image := $carouselImages }}
{{- $jpegxxs := $image.Resize (printf "%dx jpeg q%d" 412 75) }}
{{- $jpegxs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
{{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 1024 75) }}
{{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
{{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 1920 75) }}
{{- $jpegxl := $image.Resize (printf "%dx jpeg q%d" 2560 75) }}
{{- $webpxxs := $image.Resize (printf "%dx webp q%d picture" 412 75) }}
{{- $webpxs := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
{{- $webps := $image.Resize (printf "%dx webp q%d picture" 1024 75) }}
{{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
@ -21,12 +23,14 @@
<figure class="image">
<picture>
<source type="image/webp"
srcset="{{ $webpxs.Permalink }} {{ $webps.Width }}w,
srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
{{ $webpxs.Permalink }} {{ $webpxs.Width }}w,
{{ $webps.Permalink }} {{ $webps.Width }}w,
{{ $webpm.Permalink }} {{ $webpm.Width }}w,
{{ $webpl.Permalink }} {{ $webpl.Width }}w,
{{ $webpxl.Permalink }} {{ $webpl.Width }}w"
sizes="(max-width: 767x) 100vw,
sizes="(max-with: 411x) 100vw,
(max-width: 767x) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
@ -36,12 +40,14 @@
width="{{ $jpegxl.Width }}"
height="{{ $jpegxl.Height }}"
{{ if ne $index 0 }} loading="lazy" {{ end }}
srcset="{{ $jpegxs.Permalink }} {{ $jpegs.Width }}w,
srcset="{{ $jpegxxs.Permalink }} {{ $jpegxxs.Width }}w,
{{ $jpegxs.Permalink }} {{ $jpegxs.Width }}w,
{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,
{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
{{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
{{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"
sizes="(max-width: 767px) 100vw,
sizes="(max-with: 411x) 100vw,
(max-width: 767x) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
@ -55,16 +61,15 @@
<div id="news" class="carousel box overlay">
{{ range where .Site.RegularPages "Section" "spectacles" }}
{{ if and (isset .Params "actu") (.Params.actu) }}
<div class="text-center has-text-warning-light">
<div id="news" class="mcarousel box overlay">
{{ $spectacles := where .Site.RegularPages "Section" "spectacles" }}
{{ range $index, $page := where $spectacles ".Params.actu" "!=" nil }}
<div class="mcarousel-item text-center has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
<div class="title py-3">Actualités</div>
<div class="subtitle has-text-warning-light">{{ .Title }}</div>
<p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
</div>
{{ end }}
{{ end }}
</div>
@ -72,6 +77,33 @@
{{ end }}
{{ define "scripts"}}
<script>
document.addEventListener('DOMContentLoaded', function() {
let currentIndex = 0;
const items = document.querySelectorAll('.mcarousel .mcarousel-item');
const totalItems = items.length;
function moveToNextItem() {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
}
function updateCarousel() {
items.forEach((item, index) => {
item.classList.remove('is-block');
item.classList.add('is-hidden');
if (index === currentIndex) {
item.classList.remove('is-hidden')
item.classList.add('is-block');
}
});
}
const interval = 3000; // 3000ms = 3 seconds
setInterval(moveToNextItem, interval);
updateCarousel();
});
</script>
<script>
bulmaCarousel.attach('#galerie', {
slidesToScroll: 1,