/********************************************* Slider & Slideshow bloc Cover *****************************************/ /** 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 →), la navigation tactile, et pour le style "Slideshow" le défilement automatique (5s). */ /* 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 COVER (Slider ET Slideshow) ========================================================= Contrairement au bloc Galerie, le bloc Cover génère toujours un conteneur interne .wp-block-cover__inner-container qui contient le contenu du bloc (ici, les blocs Cover enfants qui servent de slides). C'est donc ce conteneur interne, et non la racine .wp-block-cover, qui devient la zone de défilement du slider. Le nom de l'ancre (--anchor-name) est injecté en PHP via le hook render_block directement sur ce conteneur interne, en utilisant un compteur (le bloc Cover n'ayant pas d'ID de classe exploitable comme wp-block-gallery-{id}). La racine .wp-block-cover (fond, dim, etc.) n'est pas modifiée par WordPress mais neutralisée ci-dessous (padding, background) : c'est pourquoi on va supprimer les marges internes et couleur du calque de superposition, et donner au conteneur interne un fond opaque (masque la barre verticale visible lors du fondu entre deux slides). */ .wp-block-cover.is-style-rcsncb-cover-slider, .wp-block-cover.is-style-rcsncb-cover-slideshow { padding: unset !important; } .wp-block-cover.is-style-rcsncb-cover-slider > .wp-block-cover__background, .wp-block-cover.is-style-rcsncb-cover-slideshow > .wp-block-cover__background { background-color: transparent !important; } .wp-block-cover.is-style-rcsncb-cover-slider > .wp-block-cover__inner-container, .wp-block-cover.is-style-rcsncb-cover-slideshow > .wp-block-cover__inner-container { display: grid !important; grid-auto-columns: 100%; grid-auto-flow: column; place-items: center; gap: 0rem;/* espacement des slides */ width: 100%; /* masque, lors du fondu entre deux slides, la barre verticale qui laisserait sinon transparaître la couleur de fond du site */ background: #AB9F98; overflow-x: auto; overscroll-behavior-x: contain; /* on veut un slider horizontal donc on n'autorise pas le défilement vertical */ overflow-y: hidden; overscroll-behavior-y: none; scroll-behavior: smooth; scrollbar-width: none; 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); /* les slides sont les blocs Cover enfants */ > .wp-block-cover { scroll-snap-align: center; /* on neutralise les contraintes de largeur héritées du layout constrained du thème sur les Cover enfants */ width: 100% !important; max-width: 100% !important; height: 100% !important; /* Annule la marge externe supérieure par défaut des blocs Cover enfants cette marge faisait descendre les images et laissait apparaître la couleur de fond #AB9F98 du conteneur interne*/ margin-top: 0 !important; /* Empêche le débordement de marge (margin collapse) des éléments internes. Le fait de passer le bloc Cover enfant en contexte Flexbox supprime définitivement le margin collapse des éléments HTML internes (

,

), ce qui empêche leurs marges de pousser le conteneur vers le bas et de révéler le fond du conteneur interne de couleur #AB9F98. display: flex; flex-direction: column; */ animation: linear fade-in, linear fade-out; animation-duration: auto; animation-timeline: view(inline); animation-range: entry 10%, exit 90%; } /*---- Boutons de défilement (état par défaut : "Slider") ---*/ &::scroll-button(*) { position: fixed; position-anchor: var(--anchor-name); border: 0; font-size: 20px; cursor: pointer; opacity: 0.7; font-family: "dashicons"; color: #FFFFFF; background: #00000066; padding:10px; margin: 15px; z-index:1; } &::scroll-button(*):hover, &::scroll-button(*):focus { opacity: 1; background: #000000B; } &::scroll-button(*):active { } &::scroll-button(*):disabled { cursor: unset; opacity:0.2; } &::scroll-button(right) { position-area: inline-end center; translate: 0.5rem 0.5rem; content: "\f345"; border-radius: 0 10px 10px 0 ; } &::scroll-button(left) { position-area: inline-start center; translate: -0.5rem 0.5rem; content: "\f341"; border-radius: 10px 0 0 10px; } } /* ========================================================= Spécifique au style "Slideshow" ========================================================= Les flèches de navigation ne sont visibles qu'au survol (ou au focus clavier) du conteneur, contrairement au style "Slider" où elles restent visibles en permanence (opacité 0.7). Le défilement automatique toutes les 5s est géré en JS (voir js/slider-native-cover-block.js), le CSS ne fait ici que gérer la visibilité des boutons. */ .wp-block-cover.is-style-rcsncb-cover-slideshow > .wp-block-cover__inner-container { > .wp-block-cover:hover { cursor:pointer; } &::scroll-button(*) { opacity: 0; z-index:1; } &:hover::scroll-button(*), &:focus-within::scroll-button(*) { opacity: 0.7; } &::scroll-button(*):hover, &::scroll-button(*):focus { opacity: 1; } &::scroll-button(*):disabled { opacity: 0; } } .wp-block-cover.is-style-rcsncb-cover-slideshow > .wp-block-cover__inner-container:hover { &::scroll-button(*):disabled { opacity: 0.2; } } /* ========================================================= Régles Mobile ========================================================= */ /* On masque les boutons de navigation @media (max-width:480px){ .wp-block-cover.is-style-rcsncb-cover-slideshow > .wp-block-cover__inner-container{ &::scroll-button(*) { opacity: 0; } } }*/ /* ========================================================= Régles CSS complémentaires au script JS ========================================================= /* pour le style slider avec un effet de fondu lorsqu'on passe de la fin au début ou vice versa */ .rcsncb-slider-fade-out { opacity: 0; transition: opacity 0.9s ease; } /* pour le style diaporama avec un effet de fondu entre chaque slide*/ .rcsncb-slideshow-fade{ opacity: 0; transition: opacity 0.9s ease; }