Title: Slider Galerie Native Responsive Author: Rouergue Création Published: 2025年8月29日 Last modified: 2026年10月5日 --- プラグインを検索 ![](https://ps.w.org/slider-galerie-native-responsive/assets/banner-772x250.jpg? rev=3728411) ![](https://ps.w.org/slider-galerie-native-responsive/assets/icon-256x256.png?rev =3705046) # Slider Galerie Native Responsive 作者: [Rouergue Création](https://profiles.wordpress.org/rock4temps/) [ダウンロード](https://downloads.wordpress.org/plugin/slider-galerie-native-responsive.1.1.2.zip) * [詳細](https://ja.wordpress.org/plugins/slider-galerie-native-responsive/#description) * [レビュー](https://ja.wordpress.org/plugins/slider-galerie-native-responsive/#reviews) * [インストール](https://ja.wordpress.org/plugins/slider-galerie-native-responsive/#installation) * [開発](https://ja.wordpress.org/plugins/slider-galerie-native-responsive/#developers) [サポート](https://wordpress.org/support/plugin/slider-galerie-native-responsive/) ## 説明 Ce plugin ajoute les styles alternatifs **“Slider”**, **“Diaporama”**, **“Carrousel”**,**“ Justifié”**, **“Carré”**, **“Masonry”**,**“Album”**, et **“Comparaison”** 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é pour ajouter la navigation clavier avec les touches fléchées ( ), la gestion tactile et le défilement automatique des modes Diaporama et Carrousel, mais aussi gérer le style Comparaison. Les styles Justifié, Carré, Masonry, et Album 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”, “Album”,“ Comparaison” 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 : les images ayant des ratios différents sont affichées dans une grille et sont imbriquées les unes sous les autres de manière compacte, sans laisser de grands espaces vides. * Album: Seule la 1ère image de la galerie est visible avec le titre de l’album, pour visualiser l’album utiliser la lightbox native de WordPress * Comparaison: par exemple comparaison de deux images Avant & Aprés travaux * 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) ✅ Compatible avec thème classique & thème de blocs(FSE). ### Utilisation 1. Dans l’éditeur de blocs (Gutenberg), insérez un bloc **Galerie** et ajoutez-y les images. 2. Dans le panneau **Styles** des paramètres du bloc, sélectionnez l’un des styles proposés: 3. * **Slider** * **Diaporama** * **Carrousel** * **Justifié** * **Carré** * **Masonry** * **Album** * **Comparaison** 4. 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é**, **Masonry**, **Album** sont visibles dans l’éditeur de blocs ainsi que sur le Front End. Pour le style **Album**: – A partir de la barre d’outils du bloc galerie, appliquer aux images le lien « Agrandir au clic ». – Définissez le titre de l’album avec la légende de la galerie. – Visualiser en Front End les images de l’album avec la visionneuse native de WordPress. Pour le style **Comparaison**: – Pour dimensionner le bloc galerie vous pouvez par exemple l’incorporer dans un bloc colonnes. – Veiller dans les paramètres du bloc galerie a ne mettre aucun lien pour les images. – Les intitulés « AVANT » &« APRÉS » sont renseignés avec la légende de l’image. ### Limitation connue * En raison du fonctionnement interne de la visionneuse native de WordPress, ** le style « Carré »** n’est pas compatible avec cette visionneuse. Vous pouvez utiliser la lightbox: ◆ [PhotoSwipe](https://fr.wordpress.org/plugins/lightbox-photoswipe/) * **le style « Album »** est compatible avec la visionneuse native de WordPress, à condition que toutes les images de la galerie aient le même ratio. ### Démo Découvrez le plugin en action sur notre [Site De Démos](https://rouerguecreation.fr/demo-slider-native-galerie-responsive/) ### Traductions ◆ Anglais ◆ Français ### Decouvrez nos autres plugins ◆ [Easy Custom Event Tickets](https://wordpress.org/plugins/custom-event-tickets/) ◆ [Editor Custom Color Palette](https://wordpress.org/plugins/editor-custom-color-palette/) ◆ [Filter Bar Custom Post Type](https://wordpress.org/plugins/filter-bar-custom-post-type/) ◆ [Rouergue Creation Top Notice Bar](https://wordpress.org/plugins/rouergue-creation-top-notice-bar/) ◆ [Rouergue Creation Events Sidebar](https://wordpress.org/plugins/rouergue-creation-sidebar-embed/) ◆ [Rouergue Creation Carousel Style Query Loop](https://wordpress.org/plugins/rouergue-creation-carousel-style-query-loop/) ◆ [Rouergue Creation Slider Native Cover Block](https://wordpress.org/plugins/rouergue-creation-slider-native-cover-block/) ## スクリーンショット [⌊Sélection des styles "Slider", "Diaporama", "Carrousel", "Justifié", "Carré", " Masonry", "Album", "Comparaison" au Panneau Styles des paramètres du bloc Galerie⌉⌊ Sélection des styles "Slider", "Diaporama", "Carrousel", "Justifié", "Carré", "Masonry"," Album", "Comparaison" au Panneau Styles des paramètres du bloc Galerie⌉[ Sélection des styles “Slider”, “Diaporama”, “Carrousel”, “Justifié”, “Carré”, “Masonry”,“ Album”, “Comparaison” au **Panneau Styles** des paramètres du bloc Galerie [⌊Exemple d’affichage du slider⌉⌊Exemple d’affichage du slider⌉[ Exemple d’affichage du slider [⌊Exemple d’affichage du carrousel⌉⌊Exemple d’affichage du carrousel⌉[ Exemple d’affichage du carrousel [⌊Exemple d’affichage du style Justifié⌉⌊Exemple d’affichage du style Justifié⌉[ Exemple d’affichage du style Justifié [⌊Exemple d’affichage du style Carré⌉⌊Exemple d’affichage du style Carré⌉[ Exemple d’affichage du style Carré [⌊Exemple d’affichage du style Masonry⌉⌊Exemple d’affichage du style Masonry⌉[ Exemple d’affichage du style Masonry [⌊Exemple d’affichage du style Album⌉⌊Exemple d’affichage du style Album⌉[ Exemple d’affichage du style Album [⌊Exemple d’affichage du style Comparaison⌉⌊Exemple d’affichage du style Comparaison⌉[ Exemple d’affichage du style Comparaison ## インストール 1. Depuis le tableau de bord de votre site, accédez à Extensions -> Ajouter une extension. 2. Recherchez **Slider Galerie Native Responsive**. 3. Cliquez sur **Installer**, puis activez le plugin. ## FAQ ### Le slider 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). * Gestion du style Comparaison 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-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; } ## 評価 このプラグインにはレビューがありません。 ## 貢献者と開発者 Slider Galerie Native Responsive はオープンソースソフトウェアです。以下の人々がこの プラグインに貢献しています。 貢献者 * [ Rouergue Création ](https://profiles.wordpress.org/rock4temps/) [“Slider Galerie Native Responsive” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/slider-galerie-native-responsive) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/slider-galerie-native-responsive/) するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/slider-galerie-native-responsive/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/slider-galerie-native-responsive/) を [RSS](https://plugins.trac.wordpress.org/log/slider-galerie-native-responsive/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 = 1.1.2= Ajouté * Ajout au panneau Styles du bloc Galerie des styles **Album**, **Comparaison**. = 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 ## メタ * バージョン **1.1.2** * 最終更新日 **2日前** * 有効インストール数 **10+** * WordPress バージョン ** 6.4またはそれ以降 ** * 検証済み最新バージョン: **7.1.3** * PHP バージョン ** 7.4またはそれ以降 ** * 言語 * [English (US)](https://wordpress.org/plugins/slider-galerie-native-responsive/) * タグ * [carousel](https://ja.wordpress.org/plugins/tags/carousel/)[gallery slider](https://ja.wordpress.org/plugins/tags/gallery-slider/) [image slider](https://ja.wordpress.org/plugins/tags/image-slider/)[responsive slider](https://ja.wordpress.org/plugins/tags/responsive-slider/) [wordpress slider](https://ja.wordpress.org/plugins/tags/wordpress-slider/) * [詳細を表示](https://ja.wordpress.org/plugins/slider-galerie-native-responsive/advanced/) ## 評価 レビューはまだ送信されていません。 [Your review](https://wordpress.org/support/plugin/slider-galerie-native-responsive/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/slider-galerie-native-responsive/reviews/) ## 貢献者 * [ Rouergue Création ](https://profiles.wordpress.org/rock4temps/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/slider-galerie-native-responsive/)