DÉMO SLIDER GALERIE NATIVE RESPONSIVE
Un plugin simple pour transformer en front end la galerie native de WordPress en un slider ou diaporama
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 pour transformer en Front End le bloc Galerie en un Slider ou Diaporama.
Caractéristiques
- Style Slider & Diaporama : 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.
- 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 à 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 17ko seulement
Utilisation
- Dans l’éditeur de blocs (Gutenberg), insérez un bloc Galerie
- Aux Paramètres du bloc Panneau Styles, sélectionnez le style Slider ou Diaporama
- Visualisez en Front End le bloc Galerie transformé en un Slider
Démo
Slider
Diaporama
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é.
/* Changer la largeur du slider */
.wp-block-gallery.is-style-sngr-gallery-slider{
width:720px;
max-width:100%;
}/* Régles pour les mobiles */
@media (max-width:480px){
/* Masquer Les Boutons */
.wp-block-gallery.is-style-sngr-gallery-slider::scroll-button(){
display:none;
}
/* Masquer Les Marqueurs De Défilement */
.wp-block-gallery.is-style-sngr-gallery-slider::scroll-marker-group{
display:none;
}
}