説明
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
スクリーンショット
インストール
- 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
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-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;
}
` -
評価
このプラグインにはレビューがありません。
貢献者と開発者
“Slider Galerie Native Responsive” をあなたの言語に翻訳しましょう。
開発に興味がありますか ?
変更履歴
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