Description
Ce plugin ajoute les styles alternatifs « Slider », « Diaporama », « Carrousel », « Justifié », « Carré » et « Masonry » au bloc Galerie natif de WordPress (Gutenberg).
Les styles Slider, Diaporama et Carrousel sont réalisés principalement en CSS, grâce aux nouvelles fonctionnalités CSS (scroll-snap, overflow, anchor-name).
Un léger script JavaScript est utilisé uniquement pour ajouter la navigation clavier avec les touches fléchées ( ), la gestion tactile et le défilement automatique des modes Diaporama et Carrousel.
Les styles Justifié, Carré et Masonry sont entièrement gérés en CSS et peuvent être utilisés directement dans l’éditeur de blocs et sur le Front End.
- Fonctionne avec le bloc Galerie natif de WordPress
- Styles « Slider », « Diaporama », « Caroussel », « Justifié », « Carré », « Masonry » sélectionnables dans le panneau Styles du bloc
- Slider: navigation manuelle avec boutons, marqueurs, clavier et défilement tactile
- Diaporama: défilement automatique avec transitions fluides en fondu toutes les 5 secondes, avec au survol pause automatique et navigation manuelle possible
- Carrousel: affichage de plusieurs images selon le nombre de colonnes défini dans la Galerie
- Carrousel: défilement automatique image par image toutes les 5 secondes avec bouclage circulaire et pause automatique au survol
- Carrousel: navigation manuelle avec les boutons natifs, les marqueurs de défilement, les touches fléchées du clavier et le défilement tactile
- Justifié : affichage des images ayant le même ratio sous forme de grille en conservant leur ratio
- Carré : affichage des images ayant le même ratio au format carré avec un ratio 1/1, façon Instagram
- Masonry : affichage des images ayant des ratios différents dans une mise en page de type maçonnerie
- Responsive: largeur automatique en fonction de la taille medium_large de la première image pour les styles Slider et Diaporama
- Navigation avec boutons & marqueurs de défilement intégrés du navigateur
- Une fois que le slider ou le Carrousel à le focus, la navigation clavier est possible avec flèche gauche () et flèche droite ()
- Animation fluide au défilement (fade-in / fade-out)
- Style Justifié & Carré: toutes les images doivent avoir le même ratio
- Style Masonry: apporte une nouvelle mise en page attrayante
✅ Compatible avec thème classique & thème de blocs(FSE).
Utilisation
- Dans l’éditeur de blocs (Gutenberg), insérez un bloc Galerie et ajoutez-y les images.
- Dans le panneau Styles des paramètres du bloc, sélectionnez l’un des styles proposés:
- Slider
- Diaporama
- Carrousel
- Justifié
- Carré
- Masonry
- Visualisez le bloc Galerie en Front End avec le style sélectionné.
Les styles Slider, Diaporama et Carrousel sont principalement destinés à l’affichage en Front End.
Les styles Justifié, Carré et Masonry sont visibles dans l’éditeur de blocs ainsi que sur le Front End.
Démo
Découvrez le plugin en action sur notre Site De Démos
Traductions
◆ Anglais
◆ Français
Decouvrez nos autres plugins
◆ Easy Custom Event Tickets
◆ Editor Custom Color Palette
◆ Filter Bar Custom Post Type
◆ Rouergue Creation Top Notice Bar
◆ Rouergue Creation Events Sidebar
◆ Rouergue Creation Carousel Style Query Loop
◆ Rouergue Creation Slider Native Cover Block
Screenshots
Installation
- Depuis le tableau de bord de votre site, accédez à Extensions -> Ajouter une extension.
- Recherchez Slider Galerie Native Responsive.
- Cliquez sur Installer, puis activez le plugin.
FAQ
-
Le slider utilise des spécifications CSS récentes.
Actuellement, il est supporté par Chrome, Edge et Opera. -
Le plugin utilise-t-il du JavaScript ?
-
Oui, un script JavaScript très léger est utilisé pour étendre les fonctionnalités CSS :
- Navigation au clavier avec les flèches ( / ).
- Défilement automatique toutes les 5s en mode Diaporama avec pause au survol.
- Défilement automatique toutes les 5s en mode Carrousel, image par image, avec bouclage circulaire.
- Amélioration de la navigation tactile sur mobile et gestion du bouclage (loop).
Le rendu visuel et la mise en page reposent sur le CSS natif.
-
Oui.
- Flèche droite () : image suivante
- Flèche gauche () : image précédente
Un mode loop permet de revenir au début ou à la fin.
-
Puis-je changer les styles (couleurs, tailles, etc.) ?
-
Oui, en surchargeant le fichier CSS du plugin via votre thème enfant ou via l’outil du menu Apparence/Personnaliser/CSS personnalisé.
Exemple:
-
changer la largeur du slider, entrez la régle CSS suivante:
.wp-block-gallery.is-style-sgnr-gallery-slider-gallery-slider{width:720px;max-width:100%;} -
Pour le slider, masquer les boutons et/ou marqueurs de défilement sur mobile:
@media (max-width:480px){
/* Boutons */
.wp-block-gallery.is-style-sgnr-gallery-slider::scroll-button(*){
display:none;
}
/* Marqueurs */
.wp-block-gallery.is-style-sgnr-gallery-slider::scroll-marker-group{
display:none;
}
} -
Pour le Carrousel, changer les couleurs des boutons de navigation & marqueurs de défilement:
.is-style-sgnr-gallery-carousel{
/* boutons de navigation: couleur de fond */
--scroll-button-background: #000;
/* Couleur marqueurs de défilement */
--scroll-marker: #1E5B99;
/* Couleur marqueur de défilement actif */
--scroll-marker-current: #1E5B99;
}
-
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Slider Galerie Native Responsive” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Slider Galerie Native Responsive” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
= 1.1.1=
Ajouté
- Ajout au panneau Styles du bloc Galerie des styles Justifié, Carré et Masonry.
- Style Justifié : affichage des images ayant le même ratio sous forme de grille en conservant leur ratio.
- Style Carré : affichage des images ayant le même ratio avec un ratio 1/1, façon instagram.
- Style Masonry : affichage des images ayant des ratios différents dans une mise en page de type maçonnerie.
- Les styles Justifié, Carré et Masonry sont disponibles dans l’éditeur de blocs et sur le Front End.
1.1
Modifié
- pour le style carrousel les icônes dashicons des boutons de
navigation sont remplacées par des icônes SVG.
1.0.9
Ajouté
- Ajout au panneau styles des paramètres du bloc, du style Carrousel.
Corrigé
- Lorsque l’utilisateur modifie le nombre de colonnes de la galerie,
alors il y avait un problème de largeur de l’image dans le slider.
1.0.8
- Ajout au panneau styles des paramètres du bloc, du style Diaporama:
Défilement automatique avec transitions fluides en fondu toutes les 5
secondes, avec au survol pause automatique et navigation manuelle
possible.
1.0.7
Compatibilité avec WordPress 7.1
1.0.6
Optimisation du code
1.0.5
Modifié
- Chargement des scripts CSS & JS uniquement si un bloc galerie
est présent.
1.0.4
Modifié
- Augmenter la spécificité des régles de style
1.0.3
Corrigé
- Sécurisation des variables injectées dans l’attribut HTML « style » du
bloc Galerie afin de respecter les bonnes pratiques de sécurité WordPress. - Le style Slider n’est pas appliqué au bloc Galerie, lorsque plusieurs
classes CSS sont présente.
1.0.2
Corrigé
- Amélioration de la navigation tactile:
Correction du bug de saut intempestif lors d’un simple toucher(sans swipe).
1.0.1
- Ajout de la navigation clavier avec les touches
- Ajout d’un mode loop pour la navigation clavier
- Mise à jour de la documentation
1.0
- Première version stable
- Ajout du style « Slider » pour le bloc Galerie
- Slider responsive en CSS pur