Fonctions de Slick
Son utilisation permet d’afficher une liste d’éléments défilants, en l’occurrence ici une série de photographies.
Par les configurations proposées, il est possible de mettre en place des effets de fondus enchaînes, de sélectionner le nombre d’images visibles et d’appliquer un défilement automatique ou manuel.
Installation et configuration
Une fois le plugin installé comme les autres, la page de configuration est accessible soit par ecrire/?exec=configurer_slick
soit par le menu “Squelettes > Slick Slideshow”, permettant d’ajuster les paramètres suivants :
- activer automatiquement : oui ou non
- Sélécteur jQuery pour Slick : choisir l’élément par une classe ou un id
- Elément à utiliser comme Slide : cibler l’élément HTML qui sera une diapositive, il doit être directement dans l’élément sélectionné précédemment.
- Nombre de slide à afficher : le nombre de diapositives visibles
- Nombre de slide à déplacer : le nombre de diapositives qui se déplacent en même temps
- AutoPlay : lecture automatique ou non
- Vitesse de l’autoplay : le déclenchement après le chargement
- Fade : effet de fondu entre les diapositives
- Vitesse de l’animation : la rapidité de la transition
- Vertical : si non ce sera horizontal
- Lazyload : ne pas charger les images avant de les voir, puis les charger dès qu’on veut les voir (ondemand), ou bien charger déjà les prochaines (avant de les voir, progressive)
- Centrer les éléments : ...
- Animation CSS3 (easing) : effet d’accélération/ralentissement lors des transitions
- Afficher les bulles de contrôle
- Pause au survol
- Pause au survol des bulles de contrôle
- Support du RTL : si oui, on adapte le diaporama à l’environnement de langue, et dont le sens de lecture peut aller de la droite vers la gauche.
- Hauteur automatique : si oui, la hauteur s’adaptera à la hauteur de chaque diapositive. Sinon la plus haute sera la hauteur du diaporama.
- Flèches précédent/suivant : utiliser la navigation précédent/suivant (non par défaut)
Affichage dans les textes
Avec les paramètres par défaut, il suffit d’avoir des images dans son site et d’insérer le diaporama dans un texte avec le modèle suivant :
<slick|>
Dix images du site au hasard seront affichées avec les paramètres optionnels que vous pourrez ajouter :
- largeur :
<slick|largeur=550>
- la largeur en pixels - hauteur :
<slick|hauteur=200>
- la hauteur en pixels - nombre :
<slick|nombre=16>
- le nombre d’images qu’on veut afficher
Exemple : <slick|largeur=650|hauteur=320|nombre=20>
Il ne faut inclure qu’une seule fois le modèle sur la même page, car il contient un identifiant qui doit rester unique (#slick).
Pour les autres paramètres, la configuration générale du plugin les règle. Voir la page “Squelettes > Slick Slideshow”.
Il est possible de personnaliser le modèle en le surchargeant : copiez le fichier du plugin modeles/slick.html
et dans le dossier squelettes/modeles
en le renommant comme vous voulez. Vous pourrez le personnaliser et l’appeler dans vos textes de la même manière que l’autre <monmodele|>
Affichage dans les textes avec le modèle <articleXX|slick>
Portfolio des documents d’un article.
Insertion du modèle <articleXX|slick>
où XX est le numéro de l’article.
Ce modèle n’utilise pas la configuration générale du plugin, mais les paramètres suivants :
- id-carousel=monid - id unique du carousel, seulement s’il y en a plusieurs sur la même page.
- docs=1,2,3 : sélectionne individuellement les documents
- infinite=true (false par défaut) - revient à la diapo 1 après la dernière
- speed=300 - vitesse de transition
- slidesToShow=1 - nb images à montrer à la fois
- slidesToScroll=1 - nb images à faire défiler en même temps
- centerMode=true (false par défaut) - centrer sur l’image (si slidesToShow > 1)
- centerPadding=40px - espace latéraux (si centerMode = true)
- dots=true (false par défaut) - afficher les points de navigation
- variableWidth=true (false par défaut) - diapositives de largeurs différentes
- adaptiveHeight=true (false par défaut) - adapter la hauteur du diaporama à la hauteur de la diapositive
- autoplay=true (false par défaut) - démarrage automatique
- autoplaySpeed=300 - temps d’exposition d’une diapositive en mode démarrage automatique
- fade=true (false par défaut) - effet de transition fondu
- couleurNav=red, ou black, ou green... ou un code héxadécimal de couleur #6509a3 - couleur des navigation (flèches et points)
- agrandir=oui : pour avoir un lien sur les images et les agrandir (Mediabox activé)
- afftitre=oui : pour afficher le titre de l’image (défaut non)
- affdesc=oui : pour afficher le descriptif de l’image (défaut non)
- largeur=1000 largeur de l’image en px dans le diaporama (défaut 960)
Exemple :
<article3|slick|agrandir=oui|slidesToShow=3|slidesToScroll=3|dots=true>
No discussion
Add a comment
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Follow the comments: |