Slick - commentaires
-
Slick
2023-01-20T15:09:41Z
https://contrib.spip.net/Slick#comment512554
2023-01-20T15:09:41Z
<p>Oui, juste la configuration de Slick.</p>
<p>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)</p>
-
Slick
2023-01-20T15:07:10Z
https://contrib.spip.net/Slick#comment512553
2023-01-20T15:07:10Z
<p>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<small class="fine d-inline"> </small>? ça se passe juste dans la configuration de Slick<small class="fine d-inline"> </small>?</p>
-
Slick
2023-01-20T14:07:03Z
https://contrib.spip.net/Slick#comment512552
2023-01-20T14:07:03Z
<p>Bonjour,</p>
<p>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 :</p>
<ul class="spip"><li> activant le plugin slick</li><li> configurant le plugin Slick pour cibler la classe sur mes pages devant produire un carrousel : ecrire/<small class="fine d-inline"> </small>?exec=configurer_slick</li></ul>
<p>Résultat ici : <a href="http://www.rfam.fr" class="spip_url spip_out auto" rel="nofollow external">www.rfam.fr</a><br class="autobr">
La classe ciblée :</p>
<pre>.js-testimonials-carousel</pre>
-
Slick
2023-01-20T13:51:01Z
https://contrib.spip.net/Slick#comment512551
2023-01-20T13:51:01Z
<p>Bonjour,<br class="autobr">
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<small class="fine d-inline"> </small>? Merci<small class="fine d-inline"> </small>!</p>
-
Slick
2022-08-27T09:36:02Z
https://contrib.spip.net/Slick#comment511629
2022-08-27T09:36:02Z
<p>Bonjour<br class="autobr">
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 « <a href='https://contrib.spip.net/AnythingSlider-version-2-x-x' class="spip_in" rel='nofollow'>Anything Slider</a> » ne fonctionne plus.<br class="autobr">
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é.<br class="autobr">
SI utile, mes codes ci-dessous :<br class="autobr">
<strong>À l'endroit où je veux afficher le Slider :</strong></p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><!-- SLIDER -->
<B_CycloShow>
<div id="cycloshow" class="zone-slider">
<header><h1>À la Une</h1></header>
<div class="slider-slick">
<BOUCLE_CycloShow(ARTICLES){titre_mot=Diaporama}{!par date_modif_manuelle}{lang}>
<div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
<div class="slider-diapo-imgfull">
<div class="slider-content desc-gauche">
<a href="#URL_ARTICLE" style="display:inline-block; width:100%" title="Lire l'article">
[(#LOGO_ARTICLE_RUBRIQUE|left|image_reduire{110,110})]
<div class="titre-slide">
[(#SURTITRE|oui)<span class="surtitre">[(#SURTITRE)]<br /></span>] <span class="titre">#TITRE</span>
[(#SOUSTITRE|oui)<span class="soustitre"><br/>[(#SOUSTITRE)]</span>]
</div>
<p class="PasMobile slider-descriptif">
[(#INTRODUCTION|ptobr|couper{200})]
</p>
<p class="SeulementMobile slider-descriptif">
[(#DESCRIPTIF|?{#DESCRIPTIF,#INTRODUCTION}|ptobr|couper{100})]
</p>
</a>
</div>
</div>
</div>
</BOUCLE_CycloShow>
</div>
<div class="div-centree"><hr></div>
</div>
</B_CycloShow>
<!-- FIN SLIDER --></code></pre></div>
<p><strong>En fin de la page Sommaire, je mets le JS :</strong><br class="autobr">
J'ai remplacé les flèches de navigation d'origine en utilisant celles de <a href='https://contrib.spip.net/Fork-Awesome-Police-5300' class="spip_in" rel='nofollow'>Fork Awesome</a>.<br class="manualbr">Je les ai décalées vers le bas via CSS.</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><script type="text/javascript"> // slider Slick $(document).ready(function(){ $('#diaporama .slider-slick').slick({ autoplay: true, lazyLoad: 'ondemand', pauseOnHover: true, autoplaySpeed: 2000, fade: true, cssEase: 'linear', arrows: true, dots: true, centerMode: true }); $('#diaporama .diaporama-play').hide(); $('#diaporama .diaporama-pause').on('click', function() { $('#diaporama .slider-slick').slick('slickPause'); $('#diaporama .diaporama-pause').hide(); $('#diaporama .diaporama-play').show(); }); $('#diaporama .diaporama-play').on('click', function() { $('#diaporama .slider-slick').slick('slickPlay'); $('#diaporama .diaporama-pause').show(); $('#diaporama .diaporama-play').hide(); }); $('#cycloshow .slider-slick').slick({ autoplay: true, lazyLoad: 'ondemand', pauseOnHover: true, autoplaySpeed: 2000, fade: true, cssEase: 'linear', arrows: true, prevArrow: '<button type="button" class="slick-prev slick-arrow" aria-label="Précédent"><span class="fa fa-chevron-circle-left arrow-slider"></span><span class="sr-only">Précédent</span></button>', nextArrow: '<button type="button" class="slick-next slick-arrow" aria-label="Suivant"><span class="fa fa-chevron-circle-right arrow-slider"></span><span class="sr-only">Suivant</span></button>', // prevArrow: '<button type="button" class="slick-prev slick-arrow" aria-label="Précédent"><svg class="svg-icon-chevron-thin-left"><use xlink:href="#icon-chevron-thin-left"></use></svg></button>', //nextArrow: '<button type="button" class="slick-next slick-arrow" aria-label="Suivant"><svg class="svg-icon-chevron-thin-right"><use xlink:href="#icon-chevron-thin-right"></use></svg></button>', dots: true, centerMode: true }); $('#cycloshow .diaporama-play').hide(); $('#cycloshow .diaporama-pause').on('click', function() { $('#cycloshow .slider-slick').slick('slickPause'); $('#cycloshow .diaporama-pause').hide(); $('#cycloshow .diaporama-play').show(); }); $('#cycloshow .diaporama-play').on('click', function() { $('#cycloshow .slider-slick').slick('slickPlay'); $('#cycloshow .diaporama-pause').show(); $('#cycloshow .diaporama-play').hide(); }); });
</script></code></pre></div>
-
Slick
2022-05-25T17:03:34Z
https://contrib.spip.net/Slick#comment511041
2022-05-25T17:03:34Z
<p>Merci Jacques pour cette réponse,</p>
<p>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</p>
<p>Cordialement,</p>
<p>Hervé</p>
-
Slick
2022-05-23T06:57:59Z
https://contrib.spip.net/Slick#comment510993
2022-05-23T06:57:59Z
<p>Bonjour,</p>
<p>Entre les 2, la lib a changée pour prendre le fork accessible.</p>
<p>voir : <a href='https://contrib.spip.net/Slick#comment508630' class="spip_in" rel='nofollow'>Slick</a></p>
-
Slick
2022-05-22T15:55:52Z
https://contrib.spip.net/Slick#comment510988
2022-05-22T15:55:52Z
<p>Bonjour,</p>
<p>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).</p>
<p>Une idée de ce qui a changé entre les branches 1.3.x et 2.x.x du plugin<small class="fine d-inline"> </small>?</p>
<p>Merci d'avance,</p>
<p>Cordialement,</p>
<p>Hervé</p>
-
Slick
2021-08-09T13:03:14Z
https://contrib.spip.net/Slick#comment508959
2021-08-09T13:03:14Z
<p>Réponse très courte : Oui.</p>
<p>Un peu plus long :</p>
<ul class="spip"><li> <a href="https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes/sommaire_modeportailcognac_goodies.html" class="spip_url spip_out auto" rel="nofollow external">https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes/sommaire_modeportailcognac_goodies.html</a></li><li> <a href="https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes/sommaire/sommaire_modeportailcognac.html#L95" class="spip_url spip_out auto" rel="nofollow external">https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes/sommaire/sommaire_modeportailcognac.html#L95</a> pour le js qui déclenche.</li></ul>
<p>(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)</p>
-
Slick
2021-08-09T12:56:38Z
https://contrib.spip.net/Slick#comment508958
2021-08-09T12:56:38Z
<p>Ce qui a été fait via <a href="https://git.spip.net/spip-contrib-extensions/slick/commit/92d404cfa20bca6dda01f67b213f5c046a23b96f" class="spip_url spip_out auto" rel="nofollow external">https://git.spip.net/spip-contrib-extensions/slick/commit/92d404cfa20bca6dda01f67b213f5c046a23b96f</a></p>
-
Slick
2021-08-08T17:40:14Z
https://contrib.spip.net/Slick#comment508953
2021-08-08T17:40:14Z
<p>Bonjour,<br class="autobr">
Mon diaporama comporte 48 images.<br class="autobr">
<a href="http://gmbvs.fr/Week-End-botanique-de-juin-2021-dans-le-Devoluy.html" class="spip_out" rel='nofollow external'>http://gmbvs.fr/Week-End-botanique-de-juin-2021-dans-le-Devoluy.html</a><br class="autobr">
Or il est indique 100 en bas et que ce soit en manuel ou en diaporama, cela boucle indéfiniment.<br class="autobr">
Comment faire pour qu'il s'arrête à la dernière diapo<small class="fine d-inline"> </small>?<br class="autobr">
Paramètres : <tt><article507|slick|agrandir=oui|centerMode=true|nombre=48></tt></p>
-
Slick
2021-06-22T07:59:27Z
https://contrib.spip.net/Slick#comment508630
2021-06-22T07:59:27Z
<p>Bonjour,</p>
<p>Je le note ici pour pas oublier : il faudrait remplacer la lib par celle -ci : <a href="https://accessible360.github.io/accessible-slick/" class="spip_url spip_out auto" rel="nofollow external">https://accessible360.github.io/accessible-slick/</a></p>
<p>C'est la même chose, mais respectueux de l'accessibilité.</p>
-
Slick
2021-04-27T08:51:22Z
https://contrib.spip.net/Slick#comment508298
2021-04-27T08:51:22Z
<p>bonjour</p>
<p>avec ce plugin, peut on réaliser un carrousel des logos d'articles qui pointeraient vers chaque article<small class="fine d-inline"> </small>?<br class="autobr">
ou si d'autres solutions spip existent, je suis preneur.</p>
<p>merci<br class="autobr">
Phil</p>
-
Slick
2019-11-22T16:41:26Z
https://contrib.spip.net/Slick#comment503139
2019-11-22T16:41:26Z
<p>J'ai résolu mon problème en dupliquant et renomant le modèle article_slick.html en mot_slick.html avec un <code class="spip_code spip_code_inline" dir="ltr">{id_mot?}</code> en paramètre.<br class="autobr">
Un appel dans le champ texte avec <code class="spip_code spip_code_inline" dir="ltr"><motX|slick|ect...></code> et c'est bon<small class="fine d-inline"> </small>!<br class="autobr">
Des fois que...</p>
-
Slick
2019-11-03T15:41:10Z
https://contrib.spip.net/Slick#comment502905
2019-11-03T15:41:10Z
<p>Bonjour et merci pour ce portage qui fonctionne très bien dans un article...<br class="autobr">
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 « <i>id_mot=1</i> », sans succès :-(<br class="autobr">
Est-ce possible<small class="fine d-inline"> </small>? Qu'est-ce que j'ai raté<small class="fine d-inline"> </small>?<br class="autobr">
Merci de vos lumières<small class="fine d-inline"> </small>!</p>
-
Slick
2019-10-04T18:23:49Z
https://contrib.spip.net/Slick#comment502612
2019-10-04T18:23:49Z
<p>bonjour<br class="autobr">
tout d'abord merci. <br class="autobr">
Ensuite j'aimerais pouvoir classer mes « diapo » par rang_lien, mais je ne vois pas comment faire.<br class="autobr">
Est-ce possible<small class="fine d-inline"> </small>? Sinon comment faire pour choisir l'ordre des images dans le diaporama<small class="fine d-inline"> </small>?<br class="autobr">
Merci encore<br class="autobr">
bonne soirée<br class="autobr">
Christophe</p>
-
Slick
2019-06-25T14:45:43Z
https://contrib.spip.net/Slick#comment501579
2019-06-25T14:45:43Z
<p>Ah ah, les grands esprits se rencontrent, j'étais justement en train de décortiquer le modèle <code class="spip_code spip_code_inline" dir="ltr"><article></code>.<br class="autobr">
J'ai ajouté à la doc...</p>
-
Slick
2019-06-25T13:55:49Z
https://contrib.spip.net/Slick#comment501578
2019-06-25T13:55:49Z
<p>Bonjour,</p>
<p>J'ai fait évoluer le modèle <code class="spip_code spip_code_inline" dir="ltr"><articleXX|slick></code> pour permettre d'afficher titres et descriptifs des images.</p>
<p>Il faudrait donc rajouter à la doc les paramètres :<br class="autobr">
* |afftitre=oui<br class="autobr">
* |affdesc=oui</p>
<p>Voir le commit : <a href="https://zone.spip.org/trac/spip-zone/changeset/115778" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/changeset/115778</a></p>
-
Slick
2018-12-01T17:13:39Z
https://contrib.spip.net/Slick#comment498937
2018-12-01T17:13:39Z
<p>Effectivement ce serai pas mal.<br class="autobr">
Bonne chance<small class="fine d-inline"> </small>!</p>
-
Slick
2018-11-22T19:57:04Z
https://contrib.spip.net/Slick#comment498852
2018-11-22T19:57:04Z
<p>Bonjour<small class="fine d-inline"> </small>;</p>
<p>J'aimerais, pour un diaporama inséré dans un article, pouvoir choisir l'ordre d'affichage des diapos.</p>
<p>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).</p>
<p>possible syntaxe :</p>
<p>au lieu de mettre :</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><articleXX|slick> </code></pre></div>
<p>on mettrait :</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><article|slick> </code></pre></div>
<p>donc, sans numéro d'article, signifierait diapo des documents attaché au présent article et dans l'ordre de ces documents.</p>
<p>Merci d'avance,</p>
<p>Cordialement,</p>
<p>Hervé</p>
-
Slick
2018-05-20T21:16:43Z
https://contrib.spip.net/Slick#comment497020
2018-05-20T21:16:43Z
<p>Bonjour RP,</p>
<p>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.</p>
<p>Pour le reste, c'est alors à toi de gérer correctement l'appel à Slick au bon endroit (modèles, squelettes...).</p>
-
Slick
2018-05-20T20:31:16Z
https://contrib.spip.net/Slick#comment497019
2018-05-20T20:31:16Z
<p>Bonjour j'aimerais pouvoir faire afficher les vignettes des photos en dessous comme le Slider Syncing<br class="autobr">
Je ne sais pas où mettre le code <br class="autobr">
<var>$('.slider-for').slick(<i><br class="autobr"> slidesToShow : 1,<br class="autobr"> slidesToScroll : 1,<br class="autobr"> arrows : false,<br class="autobr"> fade : true,<br class="autobr"> asNavFor : '.slider-nav'<br class="autobr">
</i>)<small class="fine d-inline"> </small>;<br class="autobr">
$('.slider-nav').slick(<i><br class="autobr"> slidesToShow : 3,<br class="autobr"> slidesToScroll : 1,<br class="autobr"> asNavFor : '.slider-for',<br class="autobr"> dots : true,<br class="autobr"> centerMode : true,<br class="autobr"> focusOnSelect : true<br class="autobr">
</i>)<small class="fine d-inline"> </small>;</var></p>
<p>Merci</p>
-
Slick
2018-05-11T19:45:45Z
https://contrib.spip.net/Slick#comment496887
2018-05-11T19:45:45Z
<p>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...</p>
-
Slick
2018-05-10T20:36:16Z
https://contrib.spip.net/Slick#comment496879
2018-05-10T20:36:16Z
<p>Bonjour Lucie,</p>
<p>Je pense que tu peux régler ton problème en lisant la documentation des modèles de SPIP :<br class="autobr">
<a href="https://www.spip.net/fr_article3454.html" class="spip_url spip_out auto" rel="nofollow external">https://www.spip.net/fr_article3454.html</a></p>
-
Slick
2018-05-08T03:23:27Z
https://contrib.spip.net/Slick#comment496826
2018-05-08T03:23:27Z
<p>J'ai essayé de mettre la boucle citée dans le squelette et de rajouter le modèle <tt><produitXX|slick></tt> dans mon produit sur l'espace privé mais cela n'a pas fonctionné...</p>
-
Slick
2018-05-06T22:04:39Z
https://contrib.spip.net/Slick#comment496818
2018-05-06T22:04:39Z
<p>Merci pour ta réponse Phenix. <br class="autobr">
Question bête (désolé<small class="fine d-inline"> </small>!) que veux-tu dire par placer ce modèle dans un produit<small class="fine d-inline"> </small>? <br class="autobr">
Encore merci.</p>
-
Slick
2018-05-06T21:04:28Z
https://contrib.spip.net/Slick#comment496817
2018-05-06T21:04:28Z
<p>Bonjour Lucie,</p>
<p>Tu me sembles sur la bonne piste.<br class="autobr">
Dans le cas présent, je dupliquerai le modèles des articles pour le surcharger dans le squelette.</p>
<p>Ensuite, je remplacerai id_article par id_produit :</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code> <BOUCLE_listDocs(DOCUMENTS){id_produit?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}> <div>[ (#ENV{agrandir}|oui)<a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"]>] <img src="[(#FICHIER|image_reduire{960,*}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]"> [(#ENV{agrandir}|oui)</a>] </div> </BOUCLE_listDocs></code></pre></div>
<p>Je n'ai pas testé, mais si tu places ce modèle dans un produit, cela devrait fonctionner :).</p>
-
Slick
2018-05-06T05:20:21Z
https://contrib.spip.net/Slick#comment496813
2018-05-06T05:20:21Z
<p>Bonjour et Bravo pour ce plugin<small class="fine d-inline"> </small>! <br class="autobr">
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...<br class="autobr">
Seulement voilà : mes images sont attachées à un <strong>produit</strong> (du plugin Produit, qui ajoute des produits comme objet éditorial du site). Je ne peux donc me contenter du modèle <tt><articleXX|slick></tt>, il me faudrait plutôt pouvoir écrire <tt><produitXX|slick></tt>... <br class="autobr">
Est-ce qu'il me serait possible de toucher au code du plugin pour que cela puisse se faire<small class="fine d-inline"> </small>? J'ai trouvé dans les slick > modeles > article_slick.html :</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}> <div>[ (#ENV{agrandir}|oui)<a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"]>] <img src="[(#FICHIER|image_reduire{960,*}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]"> [(#ENV{agrandir}|oui)</a>] </div> </BOUCLE_listDocs></code></pre></div>
<p>J'ai tenté de changer le critère <i>id_article<small class="fine d-inline"> </small>?</i> par <i>id_produit<small class="fine d-inline"> </small>?</i> mais cela ne suffit pas... <br class="autobr">
Alors si vous avez une idée, je suis preneuse<small class="fine d-inline"> </small>!</p>
<p>Merci et à bientôt<small class="fine d-inline"> </small>!</p>
-
Slick
2018-03-23T07:34:31Z
https://contrib.spip.net/Slick#comment496410
2018-03-23T07:34:31Z
<p>Bonjour,<br class="autobr">
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...</p>
-
Slick
2018-03-19T19:25:50Z
https://contrib.spip.net/Slick#comment496349
2018-03-19T19:25:50Z
<p>Pour info, il est possible d'améliorer la navigation dans le carrousel sur écran tactile en supprimant le scrolling par <var>touch event</var> du reste de la page à l'intérieur du <var>DIV id=«<small class="fine d-inline"> </small>...<small class="fine d-inline"> </small>» </var>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.</p>
<code class="echappe-js"><script type="text/javascript"><br> /*Prevent scrolling within Slick*/<br> function prevent(event){event.preventDefault();}<br>
<br> document.getElementById("#ID_ARTICLE").addEventListener("touchmove", prevent)<br> var haltEvent = function(event) {<br> event.preventDefault();<br> event.stopPropagation();<br> };<br>
</script></code>
<p>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.</p>
<p>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 <var>touchThreshold</var>. Voir documentation sur <a href="http://kenwheeler.github.io/slick/" class="spip_out" rel='nofollow external'>le site de Slick ( voir Settings)</a> .Par défaut, il est égale à 5, je l'ai fixé à 20 (plus sensible)<small class="fine d-inline"> </small>!</p>
<code class="echappe-js"><script type="text/javascript"><br>
jQuery(function($){$("[#(#GET{id-carousel,demo})]").slick({[touchThreshold:(#ENV{touchthreshold,20})]});<br>
</script></code>
<p>Tout ceci est en place sur <a href="http://www.neki.blog/" class="spip_out" rel='nofollow external'>mon blog BD</a><small class="fine d-inline"> </small>;)</p>
-
Slick
2018-02-28T21:50:11Z
https://contrib.spip.net/Slick#comment496095
2018-02-28T21:50:11Z
<p>En effet, c'est le paramètre <code class="spip_code spip_code_inline" dir="ltr">variableWidth</code> qui avec la valeur <code class="spip_code spip_code_inline" dir="ltr">variableWidth:true</code> peut poser problème dans certains contextes (mentionnés précédemment).<br class="autobr">
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 :</p>
<div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code>variableWidth: (#ENV{variableWidth})],
responsive: [ { breakpoint: 1200, settings: { variableWidth:true } }, { breakpoint: 979, settings: { variableWidth:false } }, { breakpoint: 350, settings: { variableWidth:false, centerPadding:0 } } ]</code></pre></div>
-
Slick
2018-02-28T17:13:07Z
https://contrib.spip.net/Slick#comment496093
2018-02-28T17:13:07Z
<p>J'ai aussi vérifié de mon côté, c'est effectivement le modèle de mon squelette qui coince<small class="fine d-inline"> </small>; celui du plugin fonctionne très bien.</p>
-
Slick
2018-02-28T16:02:48Z
https://contrib.spip.net/Slick#comment496091
2018-02-28T16:02:48Z
<blockquote class="spip">
<p>C'est bien le cas sur le site de Slick. Pas chez moi. :-(</p>
</blockquote>
<p>Du coup, le souci vient de ton site.<br class="autobr">
Je testerai en manipulant les options de slick pour voir s'il y en a pas une qui provoque ce problème :)</p>
-
Slick
2018-02-28T08:13:10Z
https://contrib.spip.net/Slick#comment496077
2018-02-28T08:13:10Z
<p>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.</p>
<p>Mes images de Slick sont bien responsives, mais inclus dans un DIV avec les attributs</p>
<div class="precode"><pre class="spip_code spip_code_block language-css" dir="ltr" style="text-align:left;" data-language="css"><code>position relative; overflow:hidden; </code></pre></div>
<p>qui ne se redimensionne pas en largeur (width) si le div parent devient plus étroit. Plus précisément, le</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code><div class="slick-slide.slick-current.slick-active"> <img src=...></div></code></pre></div> <p>qui contient l'image n'a pas d' attribut de style du genre :</p>
<div class="precode"><pre class="spip_code spip_code_block language-css" dir="ltr" style="text-align:left;" data-language="css"><code>width: 334px;</code></pre></div> <p>(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 <a href="http://kenwheeler.github.io/slick/" class="spip_out" rel='nofollow external'>Slick</a>. Pas chez moi. :-(</p>
<p>Donc j'imagine que ca passe par un script. Y a que moi qui bugge<small class="fine d-inline"> </small>?</p>
-
Slick
2018-02-27T17:56:48Z
https://contrib.spip.net/Slick#comment496070
2018-02-27T17:56:48Z
<p>Hello,</p>
<p>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 :)</p>
-
Slick
2018-02-22T20:03:49Z
https://contrib.spip.net/Slick#comment496028
2018-02-22T20:03:49Z
<p>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...<br class="autobr">
<a href="http://www.neki.blog/spip.php?rubrique10&lang=fr" class="spip_out" rel='nofollow external'>Le blog de Néki</a><br class="autobr">
Au moins, ça permet aux spipiens de comparer le comportement des galeries avec un seul item affiché...</p>
-
Slick
2018-02-22T09:31:32Z
https://contrib.spip.net/Slick#comment496018
2018-02-22T09:31:32Z
<p>Salut Phenix,<br class="autobr">
c'est vrai, je me suis mal exprimé...</p>
<p>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.</p>
<ol class="spip"><li> C'est évident visuellement avec <a href="http://neki.blog/spip.php?rubrique10" class="spip_out" rel='nofollow external'>Owl</a>, l'image est isolée, et en sus, parfaitement responsive.</li><li> C'est moins évident visuellement avec <a href="http://neki.ppks.eu/spip.php?rubrique10" class="spip_out" rel='nofollow external'>Slick</a>, parce que l'image dans le contexte de ses images voisines (effet recherché), et elle n'est malheureusement pas responsive.</li></ol>
<p>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 <a href="https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html" class="spip_out" rel='nofollow external'>stagepadding</a> pas très pratique à mon goût). La solution Slick est plus spipienne dans un sens.</p>
<p>Le paramètre mobileFirst ne semble pas fonctionné chez moi. En tout cas, je n'ai pas vu de différence...</p>
<p>A la base, les images Slick sont responsives<small class="fine d-inline"> </small>????</p>
-
Slick
2018-02-21T20:26:43Z
https://contrib.spip.net/Slick#comment496014
2018-02-21T20:26:43Z
<p>De rien, j'ai trouvé rapidement :)</p>
<p>Je ne vois pas bien de quoi tu parles au niveau des images.</p>
<p>Slick a pas mal de paramètre, peut être que tu peux tenter avec mobileFirst:true<br class="autobr">
Ce n'est pas prévu par défaut il faudra bricoler pour l'ajouter.<br class="autobr">
Ou bien le prévoir dans le plugin :)</p>
-
Slick
2018-02-21T19:57:12Z
https://contrib.spip.net/Slick#comment496013
2018-02-21T19:57:12Z
<p>BON SANG MAIS C'EST BIEN SÛR<small class="fine d-inline"> </small>! Bravo Phenix, et grand merci<small class="fine d-inline"> </small>! Je n'avais pas cette piste en tête.</p>
<p>Coups de poings sur les points par z-index et... Miracle<small class="fine d-inline"> </small>! 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...</p>
<p>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.</p>
<p>Le désavantage de la solution Slick, c'est que les images ne sont pas responsives comme chez Owl.</p>
<p>Y-a-t-il moyen de rendre les images aussi responsives que chez Owl<small class="fine d-inline"> </small>???</p>
-
Slick
2018-02-21T18:28:32Z
https://contrib.spip.net/Slick#comment496012
2018-02-21T18:28:32Z
<p>Hello,</p>
<p>Je confirme, le touch ne fonctionne pas sur mon Galaxy S5 + Firefox.<br class="autobr">
Cependant les touch event sont bien chargés (voir mon screenshot).</p>
<p>Le problème ne vient pas de slick, mais du positionnement des « dots », le <code class="spip_code spip_code_inline" dir="ltr"><ul></code> recouvre entièrement les slides en passant « au dessus ». Cela empêche les touch de fonctionner.</p>
-
Slick
2018-02-21T13:34:19Z
https://contrib.spip.net/Slick#comment496005
2018-02-21T13:34:19Z
<p>Voici les URLs (site de mise en ligne de BD) :</p>
<ol class="spip"><li>Un lien vers la galerie en carrousel version Owl : <a href="http://www.neki.blog/spip.php?rubrique10&lang=fr" class="spip_out" rel='nofollow external'>Le blog de Néki - Planche 09</a></li><li> La même page avec le même carrousel version Slick : <a href="http://neki.ppks.eu/spip.php?rubrique10&lang=fr" class="spip_out" rel='nofollow external'>Le blog de Néki - Planche 09</a></li></ol>
<p>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.</p>
<p>J'avoue de ne pas encore avoir eu le temps d'investiguer en profondeur, mais j'aimerais passer par Slick pour d'autres galeries.</p>
-
Slick
2018-02-19T10:21:37Z
https://contrib.spip.net/Slick#comment495972
2018-02-19T10:21:37Z
<p>Bonjour,</p>
<p>merci pour le retour.</p>
<p>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.</p>
<p>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<small class="fine d-inline"> </small>? Pourtant mon carrousel Slick fonctionne très bien...<br class="autobr">
Je reviens avec les URLs</p>
-
Slick
2018-02-19T08:59:16Z
https://contrib.spip.net/Slick#comment495971
2018-02-19T08:59:16Z
<p>Bonjour,</p>
<p>ummhhh... « chez moi ça marche » ©™® :)</p>
<p>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.</p>
-
Slick
2018-02-17T15:09:32Z
https://contrib.spip.net/Slick#comment495946
2018-02-17T15:09:32Z
<p>Bonjour,</p>
<p>Ce n'est pas normal, je vais investiguer dès que possible.</p>
-
Slick
2018-02-17T14:32:33Z
https://contrib.spip.net/Slick#comment495945
2018-02-17T14:32:33Z
<p>Bonjour, <br class="autobr">
une question simple : pourquoi le carrousel ne réagit pas aux touch events<small class="fine d-inline"> </small>? 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<small class="fine d-inline"> </small>?<br class="autobr">
Merci d'avance,<br class="autobr">
spipement,</p>
-
Slick
2018-01-24T11:54:07Z
https://contrib.spip.net/Slick#comment495516
2018-01-24T11:54:07Z
<p>Merci, parfait<small class="fine d-inline"> </small>!!</p>
-
Slick
2018-01-16T11:16:06Z
https://contrib.spip.net/Slick#comment495366
2018-01-16T11:16:06Z
<p>Bonjour,<br class="autobr">
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à : <a href="https://zone.spip.org/trac/spip-zone/browser/_plugins_/slick/trunk/modeles/article_slick.html" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/browser/_plugins_/slick/trunk/modeles/article_slick.html</a></p>
<p>C'est à considérer comme un exemple qu'on peut surcharger et modifier à loisir...</p>
<p>Bon SPIP<small class="fine d-inline"> </small>!</p>
-
Slick
2018-01-14T12:45:29Z
https://contrib.spip.net/Slick#comment495312
2018-01-14T12:45:29Z
<p>Bonjour,</p>
<p>J'aimerais insérer un diaporama slick dans un article, mais en maitrisant les photos qui sont affichées.</p>
<p>avec 3 options possibles :</p>
<ol class="spip"><li> Toutes les photos du portfolio de l'article dans lequel on se trouve, avec quelque chose comme <code class="spip_code spip_code_inline" dir="ltr"><slick|article></code></li><li> Toutes les photos du portfolio de l'article dont on donne le numéro, avec quelque chose comme <code class="spip_code spip_code_inline" dir="ltr"><slick|article225></code></li><li> Les photos listée par leurs numéros, avec quelque chose comme <code class="spip_code spip_code_inline" dir="ltr"><slick|doc=203,204,355,150></code></li></ol>
<p>Merci d'avance,</p>
<p>Cordialement,</p>
<p>Hervé</p>
-
Slick
2017-12-24T11:43:16Z
https://contrib.spip.net/Slick#comment495022
2017-12-24T11:43:16Z
<p>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 :<br class="autobr">
<a href="https://zone.spip.org/trac/spip-zone/changeset/108177" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/changeset/108177</a></p>
-
Slick
2017-07-10T18:56:48Z
https://contrib.spip.net/Slick#comment492804
2017-07-10T18:56:48Z
<p>Merci merci pour le retour<small class="fine d-inline"> </small>!<br class="autobr">
Au passage, il serait peut-être intéressant de faire charger la version minimisée : slick.min.js.</p>
-
Slick
2017-07-10T18:01:33Z
https://contrib.spip.net/Slick#comment492799
2017-07-10T18:01:33Z
<p>Tu ne loupes rien, c'est voulut.</p>
<p>Le compresseur de SPIP compresse mal le JS de Slick, du coup ce n'est pas compatible.</p>
<p>J'ai exclu Slick de la compression, le temps que le compresseur soit patcher.</p>
-
Slick
2017-07-10T17:47:05Z
https://contrib.spip.net/Slick#comment492798
2017-07-10T17:47:05Z
<p>Bonjour,</p>
<p>En activant «<small class="fine d-inline"> </small>Compactage des scripts et CSS<small class="fine d-inline"> </small>» de SPIP, je m'aperçois que slick.js ne fait pas partie des scripts "compacté", alors que les CSS le sont bien.</p>
<p>Je loupe quelque chose ou pas<small class="fine d-inline"> </small>?</p>
<p>Merci,<br class="autobr">
françois</p>
-
Slick
2017-06-28T09:51:47Z
https://contrib.spip.net/Slick#comment492678
2017-06-28T09:51:47Z
<p>Oui, merci Manu.</p>
<p>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.</p>
<p>L'idée était de pouvoir gérer le chargement des scripts à partir de l'interface du plugin<small class="fine d-inline"> </small>;-)</p>
-
Slick
2017-06-28T09:26:06Z
https://contrib.spip.net/Slick#comment492676
2017-06-28T09:26:06Z
<p>Ah, désolé, ma réponse ne s'est pas logée au bon endroit<br class="autobr">
<a href="https://contrib.spip.net/Slick#forum492671" class="spip_url auto" rel="nofollow">https://contrib.spip.net/Slick#forum492671</a></p>
-
Slick
2017-06-27T17:14:55Z
https://contrib.spip.net/Slick#comment492671
2017-06-27T17:14:55Z
<p>Sinon, il y a une solution assez simple que j'utilise régulièrement :<br class="autobr">
dans inclure/head.html</p>
<div class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code>[(#COMPOSITION|=={sommaire}|oui) ici l'appel au js et aux css
]</code></pre></div>
<p>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.</p>
-
Slick
2017-06-27T11:08:08Z
https://contrib.spip.net/Slick#comment492668
2017-06-27T11:08:08Z
<p>Oh c'est gentil<small class="fine d-inline"> </small>!!<br class="autobr">
Merci pour le tuyau / pipeline jeanmarie : j'y regarde<small class="fine d-inline"> </small>!!</p>
-
Slick
2017-06-27T08:39:30Z
https://contrib.spip.net/Slick#comment492666
2017-06-27T08:39:30Z
<p>Hello,</p>
<p>pour un problème similaire sur Responsive Nav, j'ai bricolé un truc (en local) avec le pipeline affichage_final comme dans Anything Slider : <a href="https://zone.spip.org/trac/spip-zone/browser/_plugins_/anythingslider/trunk/anythingslider_pipelines.php" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/browser/_plugins_/anythingslider/trunk/anythingslider_pipelines.php</a>. Ca permet de n'insérer les scripts que si une certaine classe est présente dans la page.<br class="autobr">
Mais ça oblige à ce que le diaporama ait obligatoirement cette classe...</p>
-
Slick
2017-06-25T14:45:09Z
https://contrib.spip.net/Slick#comment492653
2017-06-25T14:45:09Z
<p>Merci Phénix,</p>
<p>Et bien : insertion manuelle, tant pis<small class="fine d-inline"> </small>!!</p>
-
Slick
2017-06-25T14:32:18Z
https://contrib.spip.net/Slick#comment492652
2017-06-25T14:32:18Z
<p>Hello,</p>
<p>Non, rien n'est encore prévu pour faire cela.</p>
<p>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 :)</p>
-
Slick
2017-06-24T16:49:44Z
https://contrib.spip.net/Slick#comment492650
2017-06-24T16:49:44Z
<p>Bonjour,</p>
<p>Quand le plugin est actif, les js/css de Slick sont chargés sur toutes les pages via #INSERT_HEAD / #INSERT_HEAD_CSS.<br class="autobr">
Y aurait-il une solution pour ne charger ces éléments que sur certaines pages<small class="fine d-inline"> </small>? En l'occurrence la page=sommaire<small class="fine d-inline"> </small>;-)</p>
<p>Merci pour ce plugin,<br class="autobr">
françois</p>
-
Slick
2017-06-20T08:41:23Z
https://contrib.spip.net/Slick#comment492571
2017-06-20T08:41:23Z
<p>Sympa le plugin<small class="fine d-inline"> </small>! Et bravo.</p>
<p>Si j'ai bien compris le paramétrage, <code class="spip_code spip_code_inline" dir="ltr"><slick|largeur=650|hauteur=320|nombre=20</code> signifie que le carrousel aura une largeur de 650px et une hauteur de 320 px.</p>
<p>Or j'ai jeté un coup d'oeil dans le modèle <code class="spip_code spip_code_inline" dir="ltr"><slick|></code> du plugin. On trouve dans la boucle DOCUMENTS les critères suivants :</p>
<div class="precode"><pre class="spip_code spip_code_block language-spip" dir="ltr" style="text-align:left;" data-language="spip"><code> BOUCLE_documents_slide(DOCUMENTS) {largeur >= #GET{largeur}} {hauteur >= #GET{hauteur}}</code></pre></div> <p>qui permettent de sélectionner les documents de type image dont la largeur est supérieure ou égale à <var>#GET<i>largeur</i></var> et la hauteur supérieure ou égale à <var>#GET<i>hauteur</i></var>.</p>
<p>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.</p>
<p>Où est-ce que je me trompe<small class="fine d-inline"> </small>?</p>
-
Slick
2017-05-21T18:31:30Z
https://contrib.spip.net/Slick#comment492307
2017-05-21T18:31:30Z
<p>Bonjour,<br class="autobr">
merci pour ce plugin qui de plus a l'air de fonctionner en 3.2<br class="autobr">
Juste une remarque : chez moi slick ne fonctionne pas dans l'espace privé</p>
-
Slick
2017-05-21T06:58:36Z
https://contrib.spip.net/Slick#comment492306
2017-05-21T06:58:36Z
<p>Merci pour la qualité de ce plugin et de sa documentation.<br class="autobr">
Pour afficher seulement les images d'un article, j'ai créé un modèle de boucle contenant l'id de l'article :</p>
<p><code class="spip_code spip_code_inline" dir="ltr"> <BOUCLE_documents_slide(DOCUMENTS) {id_article}.....</code><br class="autobr">
tout simplement.</p>