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

carousel

Browse Source
pull/11/head
Florian Roger 9 months ago
parent 86ea5724d8
commit 73a9ee79db
3 changed files with 69 additions and 56 deletions
Show Stats Download Patch File Download Diff File

24
assets/css/index.css
Unescape Escape View File

@ -7,24 +7,6 @@
position: relative;
}
.carousel .image img {
height: auto; /* Set a fixed height */
width: fit-content; /* Maintain aspect ratio */
overflow: hidden;
object-fit: contain;
}
.slider {
overflow: hidden;
}
.slider-navigation-previous {
display: none;
}
.slider-navigation-next {
display: none;
}
.overlay {
z-index: 10;
@ -34,14 +16,14 @@
bottom: 10%;
height: 30%;
width: 30%;
background-color: rgba(0, 0, 0, 0.5); /* Voile clair */
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
text-align: center;
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 1023px) {
.overlay {
z-index: 10;
opacity: 1;
@ -51,6 +33,6 @@
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5); /* Voile clair */
background-color: rgba(0, 0, 0, 0.5);
}
}

90
layouts/index.html
Unescape Escape View File

@ -1,10 +1,16 @@
{{ define "styles"}}
{{ $customCSS := resources.Get "css/index.css" | resources.ToCSS }}
<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
<style>
.carousel-item {
position: absolute;
width: 100%;
}
</style>
{{ end }}
{{ define "content" }}
<section class="has-background-black is-fullheight">
<section class="has-background-danger">
<div id="galerie" class="carousel">
{{ $carouselImages := resources.Match "carousel/*"}}
{{ range $index, $image := $carouselImages }}
@ -20,7 +26,7 @@
{{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
{{- $webpl := $image.Resize (printf "%dx webp q%d picture" 1920 75) }}
{{- $webpxl := $image.Resize (printf "%dx webp q%d picture" 2560 75) }}
<figure class="image">
<figure class="image carousel-item" style="height: 100vh;">
<picture>
<source type="image/webp"
srcset="{{ $webpxxs.Permalink }} {{ $webpxxs.Width }}w,
@ -29,14 +35,15 @@
{{ $webpm.Permalink }} {{ $webpm.Width }}w,
{{ $webpl.Permalink }} {{ $webpl.Width }}w,
{{ $webpxl.Permalink }} {{ $webpl.Width }}w"
sizes="(max-with: 411x) 100vw,
(max-width: 767x) 412px,
sizes="(max-with: 411px) 100vw,
(max-width: 767px) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
(max-width: 2559px) 1920px,
2560px">
<img src='{{ $jpegl.Permalink }}'
<img style="width: 100%; height: 100%; object-fit: cover;"
src='{{ $jpegl.Permalink }}'
width="{{ $jpegxl.Width }}"
height="{{ $jpegxl.Height }}"
{{ if ne $index 0 }} loading="lazy" {{ end }}
@ -46,8 +53,8 @@
{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,
{{ $jpegl.Permalink }} {{ $jpegl.Width }}w,
{{ $jpegxl.Permalink }} {{ $jpegxl.Width }}w"
sizes="(max-with: 411x) 100vw,
(max-width: 767x) 412px,
sizes="(max-with: 411px) 100vw,
(max-width: 767px) 412px,
(max-width: 1023px) 768px,
(max-width: 1439px) 1024px,
(max-width: 1919px) 1440px,
@ -61,11 +68,11 @@
<div id="news" class="mcarousel box overlay">
<div id="news" class="newscarousel 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="newscarousel-item text-center has-text-warning-light {{ if eq $index 0}}is-block {{ else }} is-hidden {{end}}">
<div class="title has-text-warning-light 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>
@ -77,10 +84,53 @@
{{ end }}
{{ define "scripts"}}
<script>
document.addEventListener('DOMContentLoaded', function() {
let currentIndex = 0;
const items = document.querySelectorAll('.mcarousel .mcarousel-item');
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;
items.forEach((item, index) => {
if ( index !== 0 ) {
item.classList.add('is-invisible')
item.style.transform = "translateX(100%)";
} else {
item.classList.add('is-block')
};
item.style.transition = "transform 1s ease";
});
function moveToNextItem() {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
}
function updateCarousel() {
items.forEach((item, index) => {
if (index === currentIndex) {
item.classList.remove('is-invisible');
item.classList.add('is-block');
item.style.transform = "translateX(0)";
} else if (currentIndex === 0 && index === totalItems - 1) {
item.style.transform = "translateX(-100%)";
} else if (index === currentIndex -1) {
item.style.transform = "translateX(-100%)";
} else {
item.classList.remove('is-block');
item.classList.add('is-invisible');
item.style.transform = "translateX(100%)";
}
})
}
setInterval(moveToNextItem, 2000);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
let currentIndex = 0;
const items = document.querySelectorAll('.newscarousel .newscarousel-item');
const totalItems = items.length;
function moveToNextItem() {
@ -98,27 +148,13 @@
}
});
}
const interval = 3000; // 3000ms = 3 seconds
const interval = 5000; // 3000ms = 3 seconds
setInterval(moveToNextItem, interval);
updateCarousel();
});
</script>
<script>
bulmaCarousel.attach('#galerie', {
slidesToScroll: 1,
slidesToShow: 1,
navigation: false,
navigationKeys: false,
pagination: false,
loop: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
pauseOnHover: false,
duration: 300
});
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",

11
layouts/partials/navbar.html
Unescape Escape View File

@ -1,6 +1,6 @@
{{ $bg := cond .IsHome "has-background-black has-text-white" "has-background-success has-text-black" }}
<nav class="navbar is-hidden-tablet is-black is-fixed-bottom" role="navigation" aria-label="main navigation">
<nav class="navbar is-hidden-desktop is-black is-fixed-bottom" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/" aria-label="Lien vers la page d'accueil du site">
<img src="{{ $.Site.Params.logoHome |relURL }}" alt="Logo de la Compagnie le temps qu'il faut">
@ -21,8 +21,8 @@
</div>
</nav>
<div class="column is-fullheight is-one-fifth {{ $bg }} has-background-danger is-narrow is-hidden-mobile">
<aside id="sidebar" class="menu {{$bg}} is-flex is-flex-direction-column is-justify-content-space-between" style="position: fixed; top: 0; height: 100vh; width: 20%">
<div class="column is-fullheight is-one-fifth {{ $bg }} has-background-danger is-narrow is-hidden-touch" style="z-index: 100;">
<aside id="sidebar" class="menu {{$bg}} is-flex is-flex-direction-column is-justify-content-space-between" style="position: fixed; top: 0; height: 100vh;">
<div>
<a href="/" aria-label="Lien vers la page d'accueil">
<div class="figure">
@ -44,11 +44,6 @@
<div>
<div class="is-flex is-justify-content-center mb-5">
<div class="social-icons m-0 p-0">
<a href="{{ ($.Site.GetPage "mentions_legales").Permalink}}" class="mr-2 {{$bg}}" aria-label="Lien vers les mentions légales">
<span>
<i class="fa-solid fa-file-contract fa-2x"></i>
</span>
</a>
<a href="https://www.facebook.com/votre_compte_facebook" class="mr-2 {{$bg}}" aria-label="Lien vers le compte Facebook de la compagnie Le Temps Qu'il Faut">
<span>
<i class="fab fa-facebook fa-2x"></i>

Write Preview
Loading…
Cancel
Save