DÉMO SLIDER GALERIE NATIVE RESPONSIVE

Un plugin simple pour transformer en front end la galerie native de WordPress en un slider ou diaporama ou carrousel

Télécharger le plugin

Introduction

Le Slider est réalisé principalement en CSS, grâce à de nouvelles fonctionnalités CSS,
il est actuellement supporté par les navigateurs Chrome, Edge et Opera.
En un clic aux paramètres du bloc Galerie, Panneau Styles, sélectionner le style Slider ou Diaporama ou Carrousel pour transformer en Front End le bloc Galerie dans le style sélectionné.

Caractéristiques

Style Slider & Diaporama & Carrousel : Sélectionnez le style souhaité directement dans le panneau Styles du bloc Galerie natif.
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.
Défilement automatique image par image toutes les 5 secondes avec bouclage circulaire et pause automatique au survol.
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 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).
Une extension de 23ko seulement

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

Slider

Diaporama

Carrousel

Personnalisation

Vous pouvez personnaliser le slider en surchargeant le fichier CSS du plugin via votre thème enfant,
ou via l’outil du menu Apparence/Personnaliser/CSS personnalisé.

Largeur du slider

/* Changer la largeur du slider */
.wp-block-gallery.is-style-sngr-gallery-slider{
   width:720px;
}

Slider & Diaporama: couleurs boutons & marqueurs de défilement

.wp-block-gallery.is-style-sgnr-gallery-slider,
.wp-block-gallery.is-style-sgnr-gallery-slideshow {
	/* boutons de navigation */
	--scroll-button-color:#1E5B99;
	/* Marqueurs de défilement */
	--scroll-marker: #000;
	--scroll-marker-current: yellow;
}

Carrousel: couleurs boutons & marqueurs de défilement

.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;
}

Régles pour les mobiles

/* Régles pour les mobiles */
@media (max-width:480px){
  /* Masquer Les Boutons du slider */
  .wp-block-gallery.is-style-sngr-gallery-slider::scroll-button(){
    display:none;
  }
  /* Masquer Les Marqueurs De Défilement du slider */
  .wp-block-gallery.is-style-sngr-gallery-slider::scroll-marker-group{
    display:none;
  }
}

Obtenir cette extension

Slider Galerie Native Responsive