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|>
Version 1.2.3
RSS 2.0
Vos commentaires
# Le 10 juillet à 19:47, par graphie
En réponse à : Slick
Bonjour,
En activant « Compactage des scripts et CSS » de SPIP, je m’aperçois que slick.js ne fait pas partie des scripts "compacté", alors que les CSS le sont bien.
Je loupe quelque chose ou pas ?
Merci,
françois
# Le 10 juillet à 20:01, par Phenix
En réponse à : Slick
Tu ne loupes rien, c’est voulut.
Le compresseur de SPIP compresse mal le JS de Slick, du coup ce n’est pas compatible.
J’ai exclu Slick de la compression, le temps que le compresseur soit patcher.
# Le 10 juillet à 20:56, par graphie
En réponse à : Slick
Merci merci pour le retour !
Au passage, il serait peut-être intéressant de faire charger la version minimisée : slick.min.js.
Répondre à ce message
# Le 27 juin à 19:14, par Manu
En réponse à : Slick
Sinon, il y a une solution assez simple que j’utilise régulièrement :
dans inclure/head.html
[(#COMPOSITION|=={sommaire}|oui)ici l'appel au js et aux css
]
La limite du truc, c’est que, bien sûr, ’il faut répéter la condition pour cibler les autres pages dans lesquelles on souhaite utiliser le script.
# Le 28 juin à 11:51, par graphie
En réponse à : Slick
Oui, merci Manu.
Il se trouve que j’utilise ZCore, donc pas de souci pour gérer un head spécifique pour chaque page : sommaire/article/rubrique/etc.
L’idée était de pouvoir gérer le chargement des scripts à partir de l’interface du plugin ;-)
Répondre à ce message
# Le 24 juin à 18:49, par graphie
En réponse à : Slick
Bonjour,
Quand le plugin est actif, les js/css de Slick sont chargés sur toutes les pages via #INSERT_HEAD / #INSERT_HEAD_CSS.
Y aurait-il une solution pour ne charger ces éléments que sur certaines pages ? En l’occurrence la page=sommaire ;-)
Merci pour ce plugin,
françois
# Le 25 juin à 16:32, par Phenix
En réponse à : Slick
Hello,
Non, rien n’est encore prévu pour faire cela.
C’est un problème assez complexe à gérer, peut être que SPIP fournira un jour ce genre de mécanisme, mais pour le moment, il n’y a rien de cela :)
# Le 25 juin à 16:45, par graphie
En réponse à : Slick
Merci Phénix,
Et bien : insertion manuelle, tant pis !!
# Le 27 juin à 10:39, par jeanmarie
En réponse à : Slick
Hello,
pour un problème similaire sur Responsive Nav, j’ai bricolé un truc (en local) avec le pipeline affichage_final comme dans Anything Slider : https://zone.spip.org/trac/spip-zone/browser/_plugins_/anythingslider/trunk/anythingslider_pipelines.php. Ca permet de n’insérer les scripts que si une certaine classe est présente dans la page.
Mais ça oblige à ce que le diaporama ait obligatoirement cette classe...
# Le 27 juin à 13:08, par graphie
En réponse à : Slick
Oh c’est gentil !!
Merci pour le tuyau / pipeline jeanmarie : j’y regarde !!
# Le 28 juin à 11:26, par Manu
En réponse à : Slick
Ah, désolé, ma réponse ne s’est pas logée au bon endroit
https://contrib.spip.net/Slick#forum492671
Répondre à ce message
# Le 20 juin à 10:41, par Alex
En réponse à : Slick
Sympa le plugin ! Et bravo.
Si j’ai bien compris le paramétrage,
<slick|largeur=650|hauteur=320|nombre=20signifie que le carrousel aura une largeur de 650px et une hauteur de 320 px.Or j’ai jeté un coup d’oeil dans le modèle
<slick|>du plugin. On trouve dans la boucle DOCUMENTS les critères suivants :Télécharger
qui permettent de sélectionner les documents de type image dont la largeur est supérieure ou égale à #GETlargeur et la hauteur supérieure ou égale à #GEThauteur.
Ce qui signifierait dans notre exemple que seules et seulement les images d’une largeur supérieure à 650 px ET d’une hauteur de 320 px seraient sélectionnées. Ce qui lie les dimensions du carroussel avec les images qui peuvent y être affichées.
Où est-ce que je me trompe ?
Répondre à ce message
# Le 21 mai à 20:31, par baloo
En réponse à : Slick
Bonjour,
merci pour ce plugin qui de plus a l’air de fonctionner en 3.2
Juste une remarque : chez moi slick ne fonctionne pas dans l’espace privé
Répondre à ce message
# Le 21 mai à 08:58, par jpcrea
En réponse à : Slick
Merci pour la qualité de ce plugin et de sa documentation.
Pour afficher seulement les images d’un article, j’ai créé un modèle de boucle contenant l’id de l’article :
<BOUCLE_documents_slide(DOCUMENTS) {id_article}.....tout simplement.
Répondre à ce message