carousel
This commit is contained in:
Florian du Garage Num
parent
86ea5724d8
commit
73a9ee79db
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
