Slick - commentaires

Slick

Oui, juste la configuration de Slick.

Ce que j'ai fait par contre sur ce site précis, c'est d'enlever le code qui appelait owlcarousel (c'était en dûr dans le squelette et les js du squelette)

Slick

D'abord merci de ton retour. Pour être sûre d'avoir bien compris (parce que je ne suis pas développeuse) tu n'as pas du tout adapté ta page sommaire ? ça se passe juste dans la configuration de Slick ?

Slick

Bonjour,

Il se trouve que je viens de remplacer sur un site owlslider par Slick (sur un site passé de SPIP 3.2 à SPIP 4.1) juste en :

activant le plugin slick
configurant le plugin Slick pour cibler la classe sur mes pages devant produire un carrousel : ecrire/ ?exec=configurer_slick

Résultat ici : www.rfam.fr
La classe ciblée :

.js-testimonials-carousel

Slick

Bonjour,
J'ai le même problème avec AnythingSlider qui ne fonctionne plus sous SPIP 4.1. Je suis donc très intéressée par ton adaptation pour Slick, mais je n'utilise pas Soyez créateurs. Est-ce que ça peut fonctionner quand-même ? Merci !

Slick

Bonjour
Je ne sais pas si Philippe a résolu sa question, mais j'avais la même depuis mon passage à Spip 4.0 puis 4.1 dans lesquels le plugin « Anything Slider » ne fonctionne plus.
En m'inspirant des codes issus de « SoyezCreateurs », j'ai installé Slik, et je suis arrivé à mes fins (cf capture d'écran en pj) : afficher sur la page sommaire un slider affichant des articles sélectionnés par mot-clé.
SI utile, mes codes ci-dessous :
À l'endroit où je veux afficher le Slider :




À la Une






[(#LOGO_ARTICLE_RUBRIQUE|left|image_reduire{110,110})]

[(#SURTITRE|oui)[(#SURTITRE)]
] #TITRE
[(#SOUSTITRE|oui)
[(#SOUSTITRE)]]


[(#INTRODUCTION|ptobr|couper{200})]


[(#DESCRIPTIF|?{#DESCRIPTIF,#INTRODUCTION}|ptobr|couper{100})]

En fin de la page Sommaire, je mets le JS :
J'ai remplacé les flèches de navigation d'origine en utilisant celles de Fork Awesome.
Je les ai décalées vers le bas via CSS.

Slick

Merci Jacques pour cette réponse,

Comme le diaporama fonctionne avant mise à jour, je vais donc laisser le plugin en version 1.3.5 en attendant de comprendre comment obtenir le même affichage en branche 2.x.x

Cordialement,

Hervé

Slick

Bonjour,

Entre les 2, la lib a changée pour prendre le fork accessible.

voir : Slick

Slick

Bonjour,

Sur un SPIP 3.2.x (3.2.15 exactement), j'ai un slider Slick que j'ai du laisser avec le plugin Slick en version 1.3.5, car l'affichage change en version 2.x.x (voir JPG joint).

Une idée de ce qui a changé entre les branches 1.3.x et 2.x.x du plugin ?

Merci d'avance,

Cordialement,

Hervé

Slick

Réponse très courte : Oui.

Un peu plus long :

(C'est des bouts du squelette SoyezCréateurs, c'est pas forcément exactement ce que tu cherches, mais ça peut te donner des idées)

Slick

Ce qui a été fait via https://git.spip.net/spip-contrib-extensions/slick/commit/92d404cfa20bca6dda01f67b213f5c046a23b96f

Slick

Bonjour,
Mon diaporama comporte 48 images.
http://gmbvs.fr/Week-End-botanique-de-juin-2021-dans-le-Devoluy.html
Or il est indique 100 en bas et que ce soit en manuel ou en diaporama, cela boucle indéfiniment.
Comment faire pour qu'il s'arrête à la dernière diapo ?
Paramètres :

Slick

Bonjour,

Je le note ici pour pas oublier : il faudrait remplacer la lib par celle -ci : https://accessible360.github.io/accessible-slick/

C'est la même chose, mais respectueux de l'accessibilité.

Slick

bonjour

avec ce plugin, peut on réaliser un carrousel des logos d'articles qui pointeraient vers chaque article ?
ou si d'autres solutions spip existent, je suis preneur.

merci
Phil

Slick

J'ai résolu mon problème en dupliquant et renomant le modèle article_slick.html en mot_slick.html avec un {id_mot?} en paramètre.
Un appel dans le champ texte avec et c'est bon !
Des fois que...

Slick

Bonjour et merci pour ce portage qui fonctionne très bien dans un article...
Cependant, j'aimerai afficher un slider sur ma page d'accueil qui contiendrait des photos ayant le même mot-clé et je bloque... J'ai essayé un inclure du modèle « slick » auquel j'ai ajouté le critère « id_mot=1 », sans succès :-(
Est-ce possible ? Qu'est-ce que j'ai raté ?
Merci de vos lumières !

Slick

bonjour
tout d'abord merci.
Ensuite j'aimerais pouvoir classer mes « diapo » par rang_lien, mais je ne vois pas comment faire.
Est-ce possible ? Sinon comment faire pour choisir l'ordre des images dans le diaporama ?
Merci encore
bonne soirée
Christophe

Slick

Ah ah, les grands esprits se rencontrent, j'étais justement en train de décortiquer le modèle

.
J'ai ajouté à la doc...

Slick

Bonjour,

J'ai fait évoluer le modèle pour permettre d'afficher titres et descriptifs des images.

Il faudrait donc rajouter à la doc les paramètres :
* |afftitre=oui
* |affdesc=oui

Voir le commit : https://zone.spip.org/trac/spip-zone/changeset/115778

Slick

Effectivement ce serai pas mal.
Bonne chance !

Slick

Bonjour ;

J'aimerais, pour un diaporama inséré dans un article, pouvoir choisir l'ordre d'affichage des diapos.

Le mieux serais de pouvoir tenir compte de l'ordre des documents attachés, ordre défini par le plugin ordoc (qui est maintenant nativement intégré à Spip).

possible syntaxe :

au lieu de mettre :

on mettrait :

donc, sans numéro d'article, signifierait diapo des documents attaché au présent article et dans l'ordre de ces documents.

Merci d'avance,

Cordialement,

Hervé

Slick

Bonjour RP,

Pour commencer, il faut désactiver l'insertion automatique du code de Slick. C'est une option dans la configuration du plugin. Le plugin se contentera alors de charger le JavaScript et le CSS.

Pour le reste, c'est alors à toi de gérer correctement l'appel à Slick au bon endroit (modèles, squelettes...).

Slick

Bonjour j'aimerais pouvoir faire afficher les vignettes des photos en dessous comme le Slider Syncing
Je ne sais pas où mettre le code
$('.slider-for').slick( slidesToShow : 1, slidesToScroll : 1, arrows : false, fade : true, asNavFor : '.slider-nav' ) ; $('.slider-nav').slick( slidesToShow : 3, slidesToScroll : 1, asNavFor : '.slider-for', dots : true, centerMode : true, focusOnSelect : true ) ;

Merci

Slick

Merci beaucoup Phenix, je viens de regarder le lien. Je pense que cela va résoudre mon problème. Je m'y penche dès que j'ai un peu de temps...

Slick

Bonjour Lucie,

Je pense que tu peux régler ton problème en lisant la documentation des modèles de SPIP :
https://www.spip.net/fr_article3454.html

Slick

J'ai essayé de mettre la boucle citée dans le squelette et de rajouter le modèle dans mon produit sur l'espace privé mais cela n'a pas fonctionné...

Slick

Merci pour ta réponse Phenix.
Question bête (désolé !) que veux-tu dire par placer ce modèle dans un produit ?
Encore merci.

Slick

Bonjour Lucie,

Tu me sembles sur la bonne piste.
Dans le cas présent, je dupliquerai le modèles des articles pour le surcharger dans le squelette.

Ensuite, je remplacerai id_article par id_produit :

  [ (#ENV{agrandir}|oui)]  [(#ENV{agrandir}|oui)]

Je n'ai pas testé, mais si tu places ce modèle dans un produit, cela devrait fonctionner :).

Slick

Bonjour et Bravo pour ce plugin !
J'ai grâce a lui enfin pu faire une galerie sur mon site avec un lien sur les images pour les agrandir et navigation image par image. Cela ne fonctionnait pas pour moi avec la Mediabox...
Seulement voilà : mes images sont attachées à un produit (du plugin Produit, qui ajoute des produits comme objet éditorial du site). Je ne peux donc me contenter du modèle , il me faudrait plutôt pouvoir écrire ...
Est-ce qu'il me serait possible de toucher au code du plugin pour que cela puisse se faire ? J'ai trouvé dans les slick > modeles > article_slick.html :

 [ (#ENV{agrandir}|oui)]  [(#ENV{agrandir}|oui)]

J'ai tenté de changer le critère id_article ? par id_produit ? mais cela ne suffit pas...
Alors si vous avez une idée, je suis preneuse !

Merci et à bientôt !

Slick

Bonjour,
merci pour les astuces, il faut peut-être préciser qu'un id ne doit pas commencer par un chiffre, donc faire peut-être « id#ID_ARTICLE », ou sinon pour l'exemple « monid » ferait bien l'affaire...

Slick

Pour info, il est possible d'améliorer la navigation dans le carrousel sur écran tactile en supprimant le scrolling par touch event du reste de la page à l'intérieur du DIV id=« ... » contenant la galerie Slick. Ceci peut se faire simplement par ajout d'un minuscule javascript sur la page contenant le carrousel et qui ne s'applique qu'au DIV contenant SLICK.

pour le cas où le carrousel est dans une boucle ARTICLE. La balise #ID_ARTICLE n'est présente qu'à titre d'exemple, elle sert uniquement à donner une id unique au carrousel au cas où il y aurait plusieurs articles avec carrousel sur la même page.

Il m'a aussi semblé utile d'augmenter sensiblement le seuil de déclenchement de balayage du carrousel. Ceci se règle avec le paramètre touchThreshold. Voir documentation sur le site de Slick ( voir Settings) .Par défaut, il est égale à 5, je l'ai fixé à 20 (plus sensible) !

Tout ceci est en place sur mon blog BD ;)

Slick

En effet, c'est le paramètre variableWidth qui avec la valeur variableWidth:true peut poser problème dans certains contextes (mentionnés précédemment).
Pour résoudre le problème, je fais appel au paramètre responsive pour changer le paramètre en fonction de la largeur disponible. Par exemple :

variableWidth: (#ENV{variableWidth})],
responsive: [ { breakpoint: 1200, settings: { variableWidth:true } }, { breakpoint: 979, settings: { variableWidth:false } }, { breakpoint: 350, settings: { variableWidth:false, centerPadding:0 } } ]

Slick

J'ai aussi vérifié de mon côté, c'est effectivement le modèle de mon squelette qui coince ; celui du plugin fonctionne très bien.

Slick

C'est bien le cas sur le site de Slick. Pas chez moi. :-(

Du coup, le souci vient de ton site.
Je testerai en manipulant les options de slick pour voir s'il y en a pas une qui provoque ce problème :)

Slick

La solution ne semble pas passer par la CSS. Parce qu'il faut que le DIV qui contient l'image recalcule sa largeur width en fonction de son contexte. Je m'explique.

Mes images de Slick sont bien responsives, mais inclus dans un DIV avec les attributs

position relative; overflow:hidden;

qui ne se redimensionne pas en largeur (width) si le div parent devient plus étroit. Plus précisément, le

qui contient l'image n'a pas d' attribut de style du genre :

width: 334px;

(par exemple) qui se recalcule à la volée quand son contenant s'élargit ou devient plus étroit. C'est bien le cas sur le site de Slick. Pas chez moi. :-(

Donc j'imagine que ca passe par un script. Y a que moi qui bugge ?

Slick

Hello,

Je vois de quoi tu parles maintenant, mais c'est un souci CSS qu'il faut régler pour le coup, en creusant dans Slick pour gérer la taille des images autrement :)

Slick

Les liens sus-mentionnés sont devenus caduques, je fais appel aux deux galeries, Slick pour les écrans larges, et Owl pour les plus petits écrans. Il y a un bouton au-dessus de la galerie pour basculer entre les deux galeries. En attendant mieux...
Le blog de Néki
Au moins, ça permet aux spipiens de comparer le comportement des galeries avec un seul item affiché...

Slick

Salut Phenix,
c'est vrai, je me suis mal exprimé...

Dans mes carrousels, que ce soit par Owl ou Slick, le nombre d'item affiché est égal à 1. Je ne montre qu'une seule image.

C'est évident visuellement avec Owl, l'image est isolée, et en sus, parfaitement responsive.
C'est moins évident visuellement avec Slick, parce que l'image dans le contexte de ses images voisines (effet recherché), et elle n'est malheureusement pas responsive.

Chez Owl, il est difficile de faire apparaître les images voisines, parce que ca grignote beaucoup sur l'item affiché sur les grands écrans (une histoire de stagepadding pas très pratique à mon goût). La solution Slick est plus spipienne dans un sens.

Le paramètre mobileFirst ne semble pas fonctionné chez moi. En tout cas, je n'ai pas vu de différence...

A la base, les images Slick sont responsives ????

Slick

De rien, j'ai trouvé rapidement :)

Je ne vois pas bien de quoi tu parles au niveau des images.

Slick a pas mal de paramètre, peut être que tu peux tenter avec mobileFirst:true
Ce n'est pas prévu par défaut il faudra bricoler pour l'ajouter.
Ou bien le prévoir dans le plugin :)

Slick

BON SANG MAIS C'EST BIEN SÛR ! Bravo Phenix, et grand merci ! Je n'avais pas cette piste en tête.

Coups de poings sur les points par z-index et... Miracle ! Tout se laisse de nouveau dragger par le doigt ou la souris. Cool. Comme je ne veux pas les dots en surimpression, pas de soucis...

Slick a l'avantage de mettre chaque image dans le voisinage des images qui la suivent et la précède, quelque soit la taille d'écran. Owl isole les images à partir d'une certaine taille d'écran.

Le désavantage de la solution Slick, c'est que les images ne sont pas responsives comme chez Owl.

Y-a-t-il moyen de rendre les images aussi responsives que chez Owl ???

Slick

Hello,

Je confirme, le touch ne fonctionne pas sur mon Galaxy S5 + Firefox.
Cependant les touch event sont bien chargés (voir mon screenshot).

Le problème ne vient pas de slick, mais du positionnement des « dots », le

Slick

Voici les URLs (site de mise en ligne de BD) :

Un lien vers la galerie en carrousel version Owl : Le blog de Néki - Planche 09
La même page avec le même carrousel version Slick : Le blog de Néki - Planche 09

Les deux plugins sont activés. Les deux sont exploités par l'intermédiaire d'un modèle perso de mon dossier squelettes/modeles.

J'avoue de ne pas encore avoir eu le temps d'investiguer en profondeur, mais j'aimerais passer par Slick pour d'autres galeries.

Slick

Bonjour,

merci pour le retour.

Le site devait être opérationnel ce jour-même. C'est un site de mise en ligne de BD. J'ai du faire appel au plugin owl. J'ai pourtant une petite préférence pour le plugin slick. Je vais donc créer un autre dossier racine sur le serveur avec une URL alternative du site mais qui fait appel au plugin slick.

Pour info j'ai repris le modele article_slick.html pour l'adapter à mes besoins, et j'ai glissé cette copie dans mon dossier modele en le renommant. Est-ce la source de mes ennuis ? Pourtant mon carrousel Slick fonctionne très bien...
Je reviens avec les URLs

Slick

Bonjour,

Pour avoir un retour, il faudrait donner plus d'infos, ne serait-ce qu'une URL... Sans ça, on parle un peu dans le vent.

Slick

Bonjour,

Ce n'est pas normal, je vais investiguer dès que possible.

Slick

Bonjour,
une question simple : pourquoi le carrousel ne réagit pas aux touch events ? En regardant sous le capot, slick.js est équipe pour réagir aux écrans tactiles. In fine -en tout cas chez moi- pas de défilement en balayant avec le doigt... Faut-il implémenter différemment les paramètres par défaut ?
Merci d'avance,
spipement,

Slick

Merci, parfait !!

Slick

Bonjour,
j'ai aussi ce besoin, je viens d'ajouter un modèle qui rend ce service, il faut attendre la version 1.2.6 du plugin, sinon utiliser le modèle qui est là : https://zone.spip.org/trac/spip-zone/browser/_plugins_/slick/trunk/modeles/article_slick.html

C'est à considérer comme un exemple qu'on peut surcharger et modifier à loisir...

Bon SPIP !

Slick

Bonjour,

J'aimerais insérer un diaporama slick dans un article, mais en maitrisant les photos qui sont affichées.

avec 3 options possibles :

Toutes les photos du portfolio de l'article dans lequel on se trouve, avec quelque chose comme
Toutes les photos du portfolio de l'article dont on donne le numéro, avec quelque chose comme
Les photos listée par leurs numéros, avec quelque chose comme

Merci d'avance,

Cordialement,

Hervé

Slick

C'est fait avec la version 1.2.5 et elle passe par le compresseur pour l'avoir dans le js compacté et éviter une requête :
https://zone.spip.org/trac/spip-zone/changeset/108177

Slick

Merci merci pour le retour !
Au passage, il serait peut-être intéressant de faire charger la version minimisée : slick.min.js.

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.

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

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 ;-)

Slick

Ah, désolé, ma réponse ne s'est pas logée au bon endroit
https://contrib.spip.net/Slick#forum492671

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.

Slick

Oh c'est gentil !!
Merci pour le tuyau / pipeline jeanmarie : j'y regarde !!

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

Slick

Merci Phénix,

Et bien : insertion manuelle, tant pis !!

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 :)

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

Slick

Sympa le plugin ! Et bravo.

Si j'ai bien compris le paramétrage, signifie 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  du plugin. On trouve dans la boucle DOCUMENTS les critères suivants :
 BOUCLE_documents_slide(DOCUMENTS) {largeur >= #GET{largeur}} {hauteur >= #GET{hauteur}}
 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 ?



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é


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 :
 

tout simplement.