Slider Galerie Native Responsive

by Rouergue Création

Description

Ce plugin ajoute les styles alternatifs “Slider” & “Diaporama” & “Carrousel au bloc Galerie natif de WordPress (Gutenberg).
Le slider est réalisé 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 du mode diaporama & carrousel.

Fonctionne avec le bloc Galerie natif de WordPress
Styles “Slider” & “Diaporama” & “Caroussel” sélectionnables dans le panneau Styles du bloc
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
Responsive: largeur automatique en fonction de la taille medium_large de la première image
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)

✅ Compatible avec thème classique & thème de blocs(FSE).

Utilisation

Dans l’éditeur de blocs (Gutenberg), insérez un bloc Galerie, ajoutez-y les images
Aux Paramètres du bloc Panneau Styles, sélectionnez le style Slider ou Diaporama ou Carrousel
Visualisez en Front End le bloc Galerie transformé selon le style sélectionné.

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

Installation

Depuis le tableau de bord de votre site, accédez à Extensions -> Ajouter nouveau.
Rechercher Slider Galerie Native Responsive
Cliquez sur installez et activer le plugin

Screenshots

Sélection du style "Slider" ou "Diaporama" ou "Carrousel" dans le bloc Galerie
Exemple d’affichage du slider en front-end
Exemple d’affichage du carrousel en front-end

Faq

Est-il compatible avec tous les navigateurs ?

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.

La navigation clavier est-elle possible ?

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-sngr-gallery-slider{width:720px;max-width:100%;}
Masquer les boutons et/ou marqueurs de défilement sur mobile:
@media (max-width:480px){ /* Boutons */ .wp-block-gallery.is-style-sngr-gallery-slider::scroll-button(*){ display:none; } /* Marqueurs */ .wp-block-gallery.is-style-sngr-gallery-slider::scroll-marker-group{ display:none; } }
Changer les couleurs des boutons de navigation & marqueurs de défilement:
`
/* Carrousel */
.is-style-sgnr-gallery-carousel{

/* boutons de navigation */
–scroll-button-background:#000;
–scroll-button-color:yellow;

/* Marqueurs de défilement */
–scroll-marker: #1E5B99;
–scroll-marker-current: #1E5B99;

}
`

Reviews

Changelog

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