Block : Slider

Contenu

• Title (texte) : le titre facultatif du block
• Source (choix) : définit la provenance de vos slides. Soit à partir d’une requête WordPress permettant d’agréger des articles, soit à partir d’éléments statiques à définir individuellement.

Les slides définies à partir d’une requête WordPress se définissent ainsi :

• Image slug (identifiant) : le slug ACF associant l’image principale du slide
• Title slug (identifiant) : le slug ACF associant le titre du slide
• Content template (code) : le code html servant de modèle au contenu de chaque slide

Les slides statiques, définis manuellement, se définissent ainsi :

• Slide title (texte) : le titre technique du slide, ce titre n’apparaissant pas et servant uniquement de référence facilitant l’utilisation de l’interface
• Image (image) : l’image associée au slide
• Title (texte) : le titre du slug
• Content (contenu) : le contenu du slide
• Classes (texte) : la ou les classes css associées au slide

Dans les deux cas, les champs « image », « title » et « content » apparaitront seulement si dans les options du slider (voir plus bas), vous permettrez leur affichage

Réglages

En cas de choix de slides construits à partir d’une requête WordPress, un premier groupe de champs apparaitra (« Query« ), dans lequel vous pourrez définir les paramètres de cette requête. Ils sont identiques à ceux utilisés dans le bloc Category grid.

D’autres groupes de champs permettent de construite le slider lui même.

• Slides options : options définissant le contenu de chaque slides
• Slider parameters : options liées aux caractéristiques globales du slider
• Slider effects : options définissant l’effet de transition entre chaque slides
• Slider modules : options permettant d’activer et de régler les modules fonctionnels du slider
• Slider styles : options définissant les paramètres d’affichage de votre slider

Tous les paramètres des slides, des effets ou des modules utilisé ici peuvent se retrouver dans la documentation officielle de Swiper.

1 – Slides options : 

• Show images (choix) : permet ou non l’affichage des images dans les slides
• Images in background (choix) : si les images sont autorisées, cette option permet de définir si ces images doivent s’afficher comme telles ou comme images de fond
• Show titles (choix) : permet ou non l’affichage des titres dans les slides
• Title slug tag (choix) : permet de choisir la balise html entourant chaque titre de slide, si ces derniers sont autorisés
• Show contents (choix) : permet ou non l’affichage des contenus dans les slides
• Content position (choix) : permet de définir la position des titres et de la zone de contenu au sein des slides, si ces items sont autorisés

2 – Slider parameters :

• Direction (choix) : définit le sens de défilement (vertical ou horizontal) du slider
• Loop mode (choix) : définit la répétition (« loop » ou « rewind ») ou non (« none ») des éléments du slider
• Slides per view (nombre) : définit le nombre de slides visibles simultanément
• Slides per group (nombre) : définit le nombre de slides défilants simultanément
• Slides rows (nombre) : permet de placer les slides sur plusieurs lignes
• Centered slides (choix) : permet de centrer les slides qui par défaut sont alignés à gauche
• Auto height (choix) : définit une hauteur non plus fixée, mais s’adaptant à la hauteur de chaques slides
• Initial slide (nombre) : permet de définir le slide dé départ du slider
• Space between slides (nombre) : définit l’espacement entre chaque slides, utile pour les sliders avec plusieurs slides visibles simultanément

3 – Slider effects :

• Effect (choix) : permet de choisir un effet de transition, l’effet par défaut étant « slide »
• Transition duration (nombre) : le délais de passage d’une slide à l’autre, en ms
• Effect fade : transition par fondus. En savoir plus ici.
• Cube effect : effet avec animation cube rotatif. En savoir plus ici.
• Flip effect : effet avec une transition de type recto-verso. En savoir plus ici.
• Coverflow effect : effet de défilement avec débordement des slides successives. En savoir plus ici.
• Card effect : effet de défilement en profondeur, similaire à un tas de cartes piochées successivement. En savoir plus ici.
• Creative effect : effet personnalisable à partir des états précédent et suivent de chaque slide. En savoir plus ici.

4 – Slider modules :

• Navigation : initialise les flèches latérales de défilement
  – Color (couleur) : définit la couleur des flèches
  – Hover effect (choix) : active un effet d’apparition des flèche au survol du slider
  – Position (choix) : définit la position verticale des flèches
  – Placement (choix) : placer les flèches à l’intérieur ou à l’extérieur des slides
  – Lateral offset (nombre) : en cas de placement extérieur, permet de définir la distance des flèches par rapport aux bords latéraux des slides
• Pagination : initialise un système de pagination du slider
  – Type (choix) : type de pagination: « points », « fraction » ou « barre de progression »
  – Color (couleur) : choix de la couleur des items de navigation
  – Clickable (choix) : uniquement pour le type « bullets », rends les éléments de navigation clickbles, pointant sur le slide concerné
  – Dynamic bullets (nombre) : uniquement pour le type « bullets », ne fait apparaitre d’un nombre limité de points. Utile en cas de grand nombre de slides
  – Size (nombre) : uniquement pour le type « bullets », définit la taille des points
  – Position (choix) : définit la position verticale des items de navigation
  – Placement (choix) : placer les items de navigation à l’intérieur ou à l’extérieur des slides
  – Lateral offset (nombre) : en cas de placement extérieur, permet de définir la distance des items de navigation par rapport aux bords verticaux des slides
• Autoplay : active ou non le défilement automatique des slides
  – Delay (nombre) : durée en ms entre chaque défilement automatique
  – Hover pause (choix) : active ou non la mise en pause du défilement au survol du slider
  – Disable on interaction (choix)  : désactive ou non le défilement automatique du slider après une interaction avec les slides
• Scrollbar : active ou non une barre de défilement
  – Draggable (choix) : active ou non la possibilité de défilement manuel de cette barre
  – Hide after interction (choix) : masque la barre après chaque interaction
  – Snap on release (choix) : pour aligner la position du curseur sur les diapositives lorsque vous relâchez la barre de défilement
  – Track color (couleur) : la couleur de fond la scrollbar
  – Thumb color (couleur) : la couleur de la section courante de la scrollbar
  – Position (choix) : définit la position verticale de la scrollbar
  – Placement (choix) : placer la scrollbar à l’intérieur ou à l’extérieur des slides
  – Lateral offset (nombre) : en cas de placement extérieur, permet de définir la distance de la scrollbar par rapport aux bords verticaux des slides
• Parallax : applique ou non un effet parallax aux slides
  – Image (groupe) : effet à appliquer aux images, si elles sont activées
  – Title (groupe) : effets à appliquer aux titres, si ils sont activés
  – Content (groupe) : effets à appliquer aux contenus, si ils sont activés
• Free mode : active ou non le mode à défilement libre
  – Momentum (choix) : applique ou non un effet d’inertie lors du scrolling manuel
  – Sticky (choix) : active ou non l’accrochage aux positions des diapositives en mode libre
• Events : permets de définir des fonctions javascript s’exécutant au déclenchement de différents événements du slider. En savoir plus ici. Pour utilisateurs expérimentés.
• Responsive breakpoints : permet de définir des règles modifiant l’apparence du slider selon les différentes résolutions d’écran. En savoir plus ici. Pour utilisateurs expérimentés.

5 – Slider styles :

• Slider min height (nombre) : définit la hauteur minimal des slides (version desktop ou mobiles)
• Slider in height unit (choix) : définit l’unité utilisée pour cette hauteur, px ou vh (version desktop ou mobiles)
• Slider background (couleur) : définit la couleur de fond globale du slider
• Slider content classes (texte) : classes css à appliquer à la zone de contenu
• Slider content padding (nombre) : définit la marge interne de la zone de contenu des slides
• Mobile behavior (choix) : comportement de la zone de contenu sur les mobiles
• Slider content background (couleur) : définit la couleur de fond de la zone de contenu des slides
• Slider content text color (couleur) : définit la couleur des textes de la zone de contenu des slides
• Slider content title color (couleur) : définit la couleur des titres de la zone de contenu des slides
• Slide content margin (nombres) : définit les marges externes de la zone de contenu des slides
• Slider min height (nombre) : définit la largeur de la zone de contenu (version desktop ou mobiles)
• Slider in height unit (choix) : définit l’unité utilisée pour cette largeur, px ou vh (version desktop ou mobiles)