Slick

Intégration à SPIP du carrousel Slick : https://kenwheeler.github.io/slick/ (et maintenant, de son fork accessible : https://accessible360.github.io/accessible-slick/)

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>

Discussion

19 discussions

  • 6
    Philippe ROBIN

    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

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

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

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

      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.

      <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>
    • 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 !

    • 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
    • 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 ?

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

    Répondre à ce message

  • 2

    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é

    • Bonjour,

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

      voir : 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é

    Répondre à ce message

  • 1

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

    Répondre à ce message

  • 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 : <article507|slick|agrandir=oui|centerMode=true|nombre=48>

    Répondre à ce message

  • 1

    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 !

    • 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 <motX|slick|ect...> et c’est bon !
      Des fois que...

    Répondre à ce message

  • Christophe Noisette

    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

    Répondre à ce message

  • 1

    Bonjour,

    J’ai fait évoluer le modèle <articleXX|slick> 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

    • Ah ah, les grands esprits se rencontrent, j’étais justement en train de décortiquer le modèle <article>.
      J’ai ajouté à la doc...

    Répondre à ce message

  • 1

    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 :

    <articleXX|slick> 

    on mettrait :

    <article|slick> 

    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é

    Répondre à ce message

  • 1

    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

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

    Répondre à ce message

  • 5

    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 <articleXX|slick>, il me faudrait plutôt pouvoir écrire <produitXX|slick>...
    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 :

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

    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 !

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

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

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

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

    • J’ai essayé de mettre la boucle citée dans le squelette et de rajouter le modèle <produitXX|slick> dans mon produit sur l’espace privé mais cela n’a pas fonctionné...

    • 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

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

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom