=== Slider Galerie Native Responsive ===
Contributors: rock4temps
Tags: gallery slider,responsive slider,carousel,wordpress slider,image slider
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.1
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.txt

Ajoutez les styles "Slider" & "Diaporama" & "Carrousel" responsive principalement en CSS à la galerie native de WordPress (bloc Galerie).

== 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 ==

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

== Installation ==

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

== Frequently Asked Questions ==

= 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;
	
}
```

== Screenshots ==

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

== 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/) 

== 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



