/*********************************************
Slider bloc Galerie
*****************************************/
/**
Fonctionne sur navigateur chrome & edge & opera
Source:
principe: https://developer.chrome.com/blog/carousels-with-css
configurateur carrousel: https://chrome.dev/carousel-configurator/
Démo: https://chrome.dev/carousel/horizontal/gallery/
positionnement des boutons: https://frontendmasters.com/blog/quantity-query-slider/
On utilise les fonctionnalités de la spécification CSS Overflow 5
qui ont été conçues pour créer des expériences de défilement et de carrousel.
Les boutons & marqueurs de défilement sont fournis par le navigateur,
et sont accessible par les pseudos classes:
::scroll-button(right) & ::scroll-button(left) & ::scroll-marker
La navigation est possible au clic d'un bouton de navigation ou avec
la touche TAB du clavier, mais pas avec les flêches <- -> du clavier.
Un script JS ajoute la navigation clavier (touches ← et →) et gère
la navigation tactile ainsi que le style "Slideshow" & "Carousel"
pour le défilement automatique (5s)..
*/
/*
Trois styles(Slider,Diaporama,Carrousel) sont proposés
au Panneau Styles du bloc Galerie avec respectivement les classes:
• is-style-sgnr-gallery-slider → navigation manuelle (boutons,
marqueurs, clavier, tactile
toujours visibles)
• is-style-sgnr-gallery-slideshow → défilement automatique (5s),
boutons & marqueurs visibles
uniquement au survol/focus
(CSS + JS)
• is-style-sgnr-gallery-carousel → défilement automatique (5s),
boutons & marqueurs visibles
uniquement au survol/focus
(CSS + JS)
Les styles slider & Diaporama partagent le même mécanisme d'ancrage CSS
(--anchor-name) et --first-img-width, donc la même injection PHP.
Le style carrousel a en commun seulement l'ancrage CSS.
*/
/**
Définition d'un nom d'ancre différent pour chaque conteneur de slider ou carrousel
en PHP via le hook render-block.
• On injecte dans le style en ligne du bloc galerie une variable CSS
--anchor-name = --gallery-slider-1 selon l'ID du bloc galerie
récupéré dans la classe wp-block-gallery-1,wp-block-gallery-2 etc...
cela va permettre de définir une ancre pour le conteneur du slider
qu'est le bloc galerie afin de positionner les boutons et marqueur de défilement.
l'ancre est définit par la régle CSS: anchor-name: var(--anchor-name)
• On injecte aussi la variable CSS: --first-img-width dont la valeur est
la taille medium_large de la 1ère image du bloc Galerie.
Cela va nous permettre de régler la largeur du Slider.
• Définition du nombre de colonnes pour chaque conteneur de Carrousel
en PHP via le hook render-block:
On injecte dans le style en ligne du bloc galerie une variable CSS
--items = 3 ou --items = 4 etc.. selon le nbr de colonnes
récupéré dans la classe columns-3,columns-4 etc...
*/
/* Animations fondu entrant */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Animations fondu sortant */
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* =========================================================
Base commune — bloc Galerie (Slider ET Slideshow)
========================================================= */
/* conteneur du slider */
.wp-block-gallery.is-style-sgnr-gallery-slider,
.wp-block-gallery.is-style-sgnr-gallery-slideshow {
--gap:1rem;
--scroll-marker: #000;
--scroll-marker-current: #FFFFFF;
--scroll-button-color:#FFFFFF;
display: grid!important;
grid-auto-columns: 100%;
grid-auto-flow: column;
place-items: center;
gap:var(--gap);
/* important masque lors de la transition
entre deux images une barre verticale qui
à la couleur d'arrière plan du site */
background:#AB9F98;
/* Largeur du slider a la taille medium_large
ou 100% si la résolution écran < taille medium_large */
/*width:var(--first-img-width)*/
width: min(var(--first-img-width), 100%);
/* permet d'avoir une scroll bar horizontale
donc active le défilement horizontal*/
overflow-X: auto;
/*définit le comportement du navigateur lorsque la limite horizontale
d'une zone de défilement est atteinte; ici on désactive le balayage horizontal*/
overscroll-behavior-x: contain;
/*on définit un défilement fluide */
scroll-behavior: smooth;
/* on masque la scroll bar */
scrollbar-width: none;
/* Zone d'accrochage au défilement:
la zone d'accrochage est par défaut le conteneur du slider,
On définit une limite pour l'arrêt du défilement:
mandatory ou proximity
*/
scroll-snap-type: x mandatory;
/* définition d'une ancre pour le conteneur afin de positionner
les boutons et marqueur de défilement */
anchor-name: var(--anchor-name);
> .wp-block-image{
width:100%!important;
/* l'accrochage au défilement se fait au centre
valeurs possibles: start ou center ou end */
scroll-snap-align: center;
/* Animation fondu entrant & sortant
lorsque le images entrent ou sortent du conteneur de défilement
Les images clés fade-in seront appliquées à la plage entry
et les images clés fade-out à la plage exit*/
animation: linear fade-in, linear fade-out;
/* faire que la timeline pilote l'animation*/
animation-duration: auto;
animation-timeline: view(inline);
animation-range: entry 10%, exit 90%;
}
/*---- Boutons de défilement ---*/
&::scroll-button(*) {
position: fixed;
position-anchor: var(--anchor-name);
background: none;
border: 0;
padding: 0;
font-size: 30px;
cursor: pointer;
color:var(--scroll-button-color);
opacity: 0.7;
z-index: 1
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
}
&::scroll-button(*):disabled {
opacity:0.2;
cursor: not-allowed;
}
&::scroll-button(right) {
position-area: inline-end center;
translate: -3rem -0.5rem;
content: "►" / attr(data-caption);
}
&::scroll-button(left) {
position-area: inline-start center;
translate: 3rem -0.5rem;
content: "◄" / attr(data-caption);
}
/*---- Marqueurs de défilement ----*/
/*marqueur de défilement aprés le slider */
scroll-marker-group: after;
/* conteneur marqueur de défilement */
&::scroll-marker-group {
position: fixed;
position-anchor: var(--anchor-name);
position-area: block-end;
/* on remonte le conteneur des marqueurs
au bas des images de la galerie*/
margin: -18px;
display: grid;
grid-auto-columns: 20px;
grid-auto-flow: column;
gap: 20px;
}
> .wp-block-image {
/* style marqueur de défilement */
&::scroll-marker {
content: "";
width: 10px;
height: 10px;
background:var(--scroll-marker);
opacity:0.2;
border-radius: 50%;
}
/* style marqueur de défilement actif */
&::scroll-marker:target-current {
background:var(--scroll-marker-current);
opacity:1;
}
}
}
/* image pleine largeur dans la vue active
on double le selecteur: .is-style-sngr-gallery-slider
pour augmenter la spécificité du selecteur et eviter !important*/
.wp-block-gallery.has-nested-images.columns-default.is-style-sgnr-gallery-slider.is-style-sgnr-gallery-slider figure.wp-block-image:not(#individual-image) {
width: 100%;
}
/* =========================================================
Style "Slideshow" — défilement automatique (5s)
=========================================================
le CSS ne fait ici que gérer la visibilité des boutons & marqueurs
de défilement.
• les boutons ET les marqueurs de défilement ne sont visibles
qu'au survol (ou au focus clavier) du conteneur, alors qu'ils
restent visibles en permanence pour le style "Slider" (opacité 0.7) ;
• le défilement automatique toutes les 5s est géré en JS
(voir js/slider-native-cover-block.js), qui se met
également en pause tant que la souris survole le diaporama.
*/
.wp-block-gallery.is-style-sgnr-gallery-slideshow {
> .wp-block-image:hover {
cursor:pointer;
}
/*---- Boutons de défilement (masqués, visibles au survol/focus) ---*/
&::scroll-button(*) {
opacity: 0;
}
&:hover::scroll-button(*),
&:focus-within::scroll-button(*) {
opacity: 0.7;
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
}
&::scroll-button(*):disabled {
opacity: 0;
}
/*---- Marqueurs de défilement (masqués, visibles au survol/focus) ----*/
&::scroll-marker-group {
opacity: 0;
}
&:hover::scroll-marker-group,
&:focus-within::scroll-marker-group {
opacity: 1;
}
}
.wp-block-gallery.is-style-sgnr-gallery-slideshow:hover {
&::scroll-button(*):disabled {
opacity: 0.2;
}
}
/* image pleine largeur dans la vue active (style Slideshow) */
.wp-block-gallery.has-nested-images.columns-default.is-style-sgnr-gallery-slideshow.is-style-sgnr-gallery-slideshow figure.wp-block-image:not(#individual-image) {
width: 100%;
}
/* =========================================================
Régles CSS complémentaires au script JS
=========================================================
/* Régles lorsque le slider passe de la fin au début ou vice versa */
.sgnr-slider-fade-out {
opacity: 0;
transition: opacity 0.9s ease;
}
/* pour le style diaporama avec un effet de fondu entre chaque slide*/
.sgnr-slideshow-fade{
opacity: 0;
transition: opacity 0.9s ease;
}
/* =========================================================
Régles Style Slider & Diaporama sur mobile
========================================================= */
@media (max-width:480px){
/* marqueurs de défilement (Slider) */
.wp-block-gallery.is-style-sgnr-gallery-slider{
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
}
/* marqueurs de défilement (Slideshow) */
.wp-block-gallery.is-style-sgnr-gallery-slideshow{
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
}
}
/* =========================================================
bloc Galerie Style Carrousel
========================================================= */
.is-style-sgnr-gallery-carousel{
--gap:1rem;
--scroll-marker: #000;
--scroll-marker-current: #000;
--scroll-button-background:#000;
/* On force une disposition en grille */
display:grid!important;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--items) - 1) * var(--gap)) / var(--items));
gap: var(--gap);
/* permet d'avoir une scroll bar horizontale*/
/* donc active le défilement horizontal */
overflow-X: auto;
/* définit le comportement du navigateur lorsque la limite horizontale */
/* d'une zone de défilement est atteinte; ici on désactive le balayage horizontal */
overscroll-behavior-x: contain;
/* on définit un défilement fluide */
scroll-behavior: smooth;
/*on masque la scroll bar sur PC*/
scrollbar-width: none;
/* Zone d'accrochage au défilement:
la zone d'accrochage est par défaut le conteneur du carrousel,
mais on peut la préciser avec scroll-padding & scroll-margin.
On définit une limite pour l'arrêt du défilement:
mandatory ou proximity
*/
scroll-snap-type: x mandatory;
/* définition d'une ancre pour le conteneur afin de positionner
les boutons et marqueur de défilement */
anchor-name: var(--anchor-name);
> .wp-block-image {
width:100%!important;
/* on désactive l’accroche au défilement sur chaque item */
scroll-snap-stop: unset;
/* suppression des marges pour les items */
}
/* permettre un défilement par pagination (1 image par page)*/
/* 👉 seulement la première image de chaque page accrochent */
> .wp-block-image:nth-child(1n+1) {
/* scroll-snap-align: start ou center
l'acrochage au défilement c'est a dire l'arrêt
se fait a l'élément 1n+1.
Du coup, le scroll va se faire image par image
dans un sens de défilement comme dans l'autre.*/
scroll-snap-align: start;
/*garantit que le défilement s’arrêtent a chaque image
et ne sautent pas au-delà.*/
scroll-snap-stop: always;
}
/*---- Boutons de défilement ---*/
&::scroll-button(*) {
position: fixed;
position-anchor: var(--anchor-name);
border: 0;
cursor: pointer;
opacity: 0.65;
background: var(--scroll-button-background);
padding:0px;
border-radius:50%;
/* Dimensions fixes du bouton */
width: 25px;
height: 25px;
/* Suppression de l'alignement sur la ligne de texte */
display: block;
/* Configuration de l'icône SVG en arrière-plan centré */
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px; /* Taille de l'icône dans le bouton */
/* On vide le content pour utiliser le background */
content: "";
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
background-color: var(--scroll-button-background);
}
&::scroll-button(*):active {
}
&::scroll-button(*):disabled {
cursor: unset;
opacity:0.2;
}
&::scroll-button(right) {
position-area: inline-end center;
translate: -4rem;
/* Flèche droite SVG */
background-image: url('data:image/svg+xml;utf8,');
}
&::scroll-button(left) {
position-area: inline-start center;
translate: 4rem;
/* Flèche gauche SVG */
background-image: url('data:image/svg+xml;utf8,');
}
/*---- Marqueurs de défilement ----*/
/* marqueurs de défilement aprés le carrousel */
scroll-marker-group: after;
/* conteneur des marqueurs de défilement */
&::scroll-marker-group {
position: fixed;
position-anchor: var(--anchor-name);
position-area: block-end;
margin: 10px;
display: grid;
grid-auto-columns: 20px;
grid-auto-flow: column;
gap: 20px;
}
> .wp-block-image {
/* style marqueur de défilement */
&::scroll-marker {
content: "";
width: 10px;
height: 10px;
background:var(--scroll-marker);
opacity:0.3;
border-radius: 50%;
}
/* style marqueur de défilement actif */
&::scroll-marker:target-current {
background:var(--scroll-marker-current);
opacity:1;
}
}
/* cas particulier ou l'utilisateur a définit une galerie
a une seule colonne, mais ce n'est alors plus un carrousel
mais un slider.( problème dans ce cas avec marqueurs de
défilement en mode auto et navigation clavier)
Largeur du carrousel a la taille medium_large
ou 100% si la résolution écran < taille medium_large
width:var(--first-img-width)
*/
&.columns-1{
width: min(var(--first-img-width), 100%);
/* important masque lors de la transition
entre deux images une barre verticale qui
à la couleur d'arrière plan du site */
background:#AB9F98;
}
}
/* ============================================================
* Carrousel circulaire( élimination des clônes des marqueurs)
* Les clones servent uniquement au défilement circulaire.
* Ils ne doivent jamais créer de ::scroll-marker.
*
* sans le code css ci-dessous
* Par exemple pour une galerie de 7 photos sur 4 colonnes
* donc trois nouvelles photos sur la 2ème page, a cause des clones
* des images crées pour le bouclage circulaire on a trois marqueurs
* dupliqués à gauche & 3 à droite.
* [5][6][7] [1][2][3][4][5][6][7] [1][2][3]
* clones originales clones
* ============================================================ */
.is-style-sgnr-gallery-carousel > .sgnr-carousel-clone::scroll-marker {
content: none;
}
.is-style-sgnr-gallery-carousel > .sgnr-carousel-clone::scroll-marker:target-current {
content: none;
}
/* =========================================================
Régles Style Carrousel sur mobile
========================================================= */
@media (max-width:767px){
/* on double le selecteur: .is-style-sgnr-gallery-carousel
pour augmenter la spécificité du selecteur et eviter !important*/
.is-style-sgnr-gallery-carousel.is-style-sgnr-gallery-carousel{
/* publication pleine largeur */
grid-auto-columns: 100%;
/* on rétabli la scroll bar*/
scrollbar-width: auto;
/* conteneur des marqueurs de défilement */
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
> .wp-block-image {
/* sur mobile on réactive l'accrochage au défilement
pour chaque item, alignement centrée */
scroll-snap-align: center;
}
}
}