Topic outline

  • General

    Collapse all Expand all

    Compétences nécessaires :

    • connaître un minimum le langage Javascript
    • être à l'aise avec le HTML et le CSS
    • connaître les problématiques récurrentes de la programmation web front-end (manipulation du DOM, appels AJAX, événements, etc...)
    • connaître un minimum la POO


    Ressources :


    Dernière version de JQuery (last stable release) : 3.6 mars 2021  (wiki : https://en.wikipedia.org/wiki/JQuery)

  • Présentation

    JQuery a été créé en 2006 afin de facilitier la travail des développeurs web. En effet, de nombreuses tâches pouvaient être répétitives et fastidieuses à cette époque, car Javascript n'était pas aussi complet qu'aujourd'hui. Mais dans les années 2000, et face à l'explosion de l'utilisation d'Internet, il fallait inventer un outils qui permettait de travailler de manière plus rapide, plus "normalisée", et surtout plus fiable.

    JQuery est une bibliothèque Javascript, et permet donc de dynamiser des pages web côté client, via l'utilisation d'un langage de programmation. Ceci est très important, car il faut bien comprendre que HTML et CSS ne sont pas des langage de programmation, et qu'on est donc très vite limités - technologiquement parlant - si on se cantonne à eux seuls.

    L'atout majeur de JQuery est qu'il permet de manipuler le DOM de manière beaucoup plus facile qu'en vanillaJS. Ça n'est plus exactement vrai au moment ou j'écris ces lignes, mais ça reste un des principaux avantages de JQuery. Le DOM (pour Document Object Model), c'est la représentation de l'intégralité d'une page web dans un seul objet récursif. Donc pour faire simple, JQuery va vous permettre de manipuler l'ensemble des éléments de votre page web (HTML + CSS) à l'aide de Javascript. Javascript étant un langage de programmation, on va pouvoir faire des choses très complexes et très souples, impossible à réaliser en HTML/CSS. 

    Voici quelques exemple :

    • changer les couleurs d'un élément selon certaines conditions
    • modifier la position d'un élément
    • faire apparaître ou disparaître des éléments selon des actions de l'utilisateurs
    • etc...


    Vous devez bien comprendre que ces "actions", peuvent se produire après le chargement de votre page. Une fois que votre page est chargée, le HTML/CSS n'offrent que très peu de dynamique. La page est chargée : elle s'affiche, point. A quelques exceptions près (effets CSS, contenu dynamique (ex : vidéos), responsive design), le couple HTML/CSS est très statiques, et l'affichage du contenu ne pourra pas être modifié après le chargement. C'est précisément la qu'intervient JQuery, via Javascript.




    JQuery aujourd'hui

    Bien que JQuery soit en perte de vitesse aujourd'hui, cette bibliothèque est encore très répandue dans le monde professionnel. La dernière version (3.4) date d'avril 2019, ce qui sous entends qu'elle est encore bien maintenue, et que l'on peux encore s'appuyer dessus sérieusement. 

    Voici quelques raisons qui justifie la baisse de l'utilisation de JQuery par les développeurs à l'heure actuelle :

    1. Javascript a fortement évolué récemment, et on peux désormais manipuler le DOM plus facilement qu'auparavant
    2. certaines fonctionnalités "fastidieuses" des anciennes version de JS (tel que l'objet XHR pour faire de l'ajax par exemple) sont désormais intégrées en JS natif (tel que l'API fetch)
    3. la surcouche JQuery est bien moins performante face à du vanillaJS. Et pour un développeur consciencieux, ça compte.
    4. avec l'arrivée de la programmation JS en back-end grâce à nodeJS, ce langage est entré dans "la cours des grands". JQuery appartenant plutôt à "la vieille école", il est tout naturellement exposé à la critique technique, et sévèrement jugé. 
    5. 2006 en développement web, c'est carrément préhistorique. On parle d'un temps ou Facebook, Twitter et YouTube étaient embryonnaires... Peu de technos durent aussi longtemps dans ce domaine


    Benchmark de différentes librairies JS versus vanillaJS :


  • Installation

    Afin d'utiliser JQuery dans votre site web, il vous faudra l'avoir à disposition dans vos pages HTML. Plusieurs techniques sont possibles


    Le plus simple : utiliser un CDN

    Vous pouvez utiliser différents CDN, et appeler différentes versions de JQuery. Le plus simple reste d'aller sur le site officiel de JQuery, dans l'onglet "Download", puis de se laisser guider. Avec cette technique, vous serez certains d'avoir des fichiers "propres", et avec une bonne bande passante. En revanche, ils ne seront pas installés sur votre propre serveur. Voici un lien vers la page des CDN officiels de JQuery : https://code.jquery.com/. Vous n'avez plus qu'à choisir votre version, et l'aspect du fichier (minifié, slim (allégé), etc...).

    Le fichier JS de JQuery est a appeler dans les balises <head> de votre page, comme n'importe quel fichier Javascript.

    Exemple :

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    Installation en local

    Vous pouvez décider de télécharger JQuery dans le dossier de votre projet. Il vous suffit de télécharger une version de JQuery via la technique que vous voulez :

    • téléchargement "manuel"
    • télécharger source + fichier de production
    • utiliser un gestionnaire de dépendances tel que NPM ou Bower
    • etc...


    Il y a de nombreuses façons d'installer JQuery en local, choisissez celle que vous souhaitez selon vos compétences. Mais l'idée reste la même : vous appellerez le fichier contenant JQuery dans vos pages web. Les choix d'installation relèvent plus de choix d'architecture et d'environnement de développement.


    Vérifier que l'installation fonctionne bien

    Maintenant que savons appeler JQuery dans une page web, nous allons vérifier que tout cela fonctionne correctement. Veuillez créer un nouveau dossier de test "jquery" dans votre espace de travail, puis à l'intérieur :

    1. créer un fichier index.html
    2. créer un fichier sandbox.js
    3. appeler JQuery et votre fichier sandbox dans la balise <head> de votre fichier index.html
    4. faites un minimum de présentation (<title> et <h1>)


    Voici ce que vous devriez avoir :


    Afin de vérifier si JQuery est fonctionnel, nous allons utiliser une fonction vraiment très répandu dans l'usage de JQuery, c'est la méthode .ready(). Cette méthode permet de savoir si toute la page web a été chargée. C'est très important, car si on veux modifier l'apparence (ou tout autre chose) de notre page, il faut attendre que l'intégralité du document soit disponible.

    Recopier ce code dans vos fichiers :



    Une fois que c'est fait, ouvrez l'onglet "console" de l'inspecteur du navigateur, rechargez votre page, puis constater l'apparition des messages écris dans les console.log. Si le message contenu dans la méthode .ready() s'affiche bien, c'est que JQuery est fonctionnel. Le caractère $ étant l'objet permettant d'utiliser JQuery, si celui-ci fonctionne, c'est que JQuery est correctement chargé et interprété dans votre page.


    L'objet $

    Le caractère $ représente JQuery. C'est en commençant vos instructions avec celui-ci que vous allez pouvoir accéder à toutes les possibilités que vous offre JQuery. Il se peut, pour des raisons techniques, que le caractère $ soit remplacé par d'autre termes (ex : JQuery(), ou JQ(), ou $jq(),...). Ça ne change rien, c'est juste qu'on appellera JQuery d'une manière différente. Cela se produit souvent pour des raison de conflits avec d'autres bibliothèques ou fonctions déjà présentent sur votre site,  et qui utilisent déjà le caractère $ comme objet global. Mais par défaut, c'est bien le $ qu'il faut utiliser. Donc ne soyez pas surpris si vous voyez quelques nuances dans les exemples de code sur Internet.

  • Sélectionner des élements

    Avant de pouvoir modifier les propriétés des éléments du DOM, il faut pouvoir "cibler" les élements que l'on souhaite modifier. JQuery est très pratique pour ça, car il utilise la même logique que les règles de sélections de CSS. 

    Voici un petit rappel :

    • possibilité de sélectionner un ou des éléments par leur tag (balise). Exemple : tous les liens -> $('a')
    • possibilité de sélectionner un ou des éléments par leur classe CSS. Exemple : tous les éléments ayant la classe "important" -> $('.important')
    • possibilité de sélectionner un élément par son ID. Exemple : l’élément ayant l'id "itineraire" -> $('#itineraire')
    • etc...


    Donc on peut cibler un ou plusieurs éléments dans le DOM avec la même logique que le CSS, en utilisant cette syntaxe :

    $('règle de sélection CSS').....

    Cet aspect de JQuery est très important, car c'est après avoir sélectionné un élément qu'on va pouvoir modifier ses propriétés.



    Voici quelques exemples de sélection par nom d'élément et par ID :


    Autres règles de sélections

    Il y a de nombreuses manières de sélectionner ou un plusieurs éléments dans le DOM. Nous venons de voir les trois principales (tag, classe et id), voici quelques autres cas de figure possibles :

    • sélectionner des éléments en utilisant des liens de parenté avec l'opérateur >
    • utiliser des pseudos classes pour cibler seulement les élements ayant un état particulier (ex : :checked pour sélectionner des checkbox "checkées")
    • cibler par attributs HTML (ex : [name=telephone] pour <input type=text name="telephone" />)
    • etc...

    Toutes ces règles collent quasiment à 100% avec les spécifications CSS (je ne sais pas si c'est 100% compatible), voici la liste des sélecteurs de la documentation officielle : https://api.jquery.com/category/selectors/

    Voici une cheatsheet reflétant bien les différents types de sélecteur :


  • Manipuler le DOM

    Méthodes de base

    Une fois que l'on a bien ciblé les éléments qui nous intéressent, on va pouvoir y appliquer les fonctionnalités de JQuery. JQuery étant un "objet", au sens programmation informatique du terme, nous utiliserons la syntaxe et le vocabulaire de la POO afin d'utiliser correctement les possibilités qu’offre JQuery. Voici une illustration du fonctionnement de base des méthodes JQuery suivant le sélecteur :



    La méthode .css()

    Si par exemple vous souhaiter modifier les propriétés CSS d'un élément, vous pourrez utiliser la méthode .css() de JQuery. Veuillez copier-coller le code HTML ci-dessous dans votre page web, afin de réaliser quelques tests :

    <h2>Modifier les propriétés CSS d'une balise</h2>
    <p>Nous allons voir ici comme modifier les propriétés CSS d'un titre H2 et d'un paragraphe</p>

    Ensuite, dans votre fichier sandbox.js, utiliser JQuery pour mettre le titre <h2> en orange, et le paragraphe <p> en italique, en utilisant la méthode .css(). N'oubliez pas de placer votre code à l'intérieur de la fonction .ready(), sinon cela risque de ne pas fonctionner.

    Voici un exemple de code pour arriver à ce résultat :


    Résultat attendu :



    La méthode .html()

    Une autre méthode vraiment très basique de JQuery, c'est la méthode .html(). Elle vous permet de lire ou de modifier le contenu d'une balise HTML. Cela peut être tout ce que l'on souhaite, mais c'est bien souvent du texte que l'on va modifier. Pour découvrir ça, nous allons afficher la date courante dans notre sandbox, à l'aide de JS. Copiez-collé le code HTML ci-dessous :

    <h2>Modifier le contenu HTML d'une balise</h2>
    <span id="date">Date non définie</span>

    Ensuite, dans votre fichier sandbox.js, faites en sorte de :

    1. mettre la date en cours dans une variable JS
    2. afficher le contenu du span "date" dans votre console
    3. mettre la date en cours dans le span "date"
    4. re-afficher le contenu du span "date" dans votre console


    Voici un exemple de code pour faire cela :



    Résultat attendu :


    Rafraîchissez votre page à plusieurs reprises pour bien constater que l'heure change à chaque fois. Et voila, on affiche la date de manière dynamique dans notre page HTML ! Ce qui est impossible à faire sans l'aide de JS. Et JQuery nous permet d'accéder aux éléments, et de les modifier, grâce à une syntaxe aisée.


    Exemple plus complet

    Recopier le code ci-dessous dans votre sand box :

    <h2>Liste de fruits</h2>
    <ul id="fruits">
      <li class="agrume">Orange</li>
      <li class="fruit_rouge">Framboise</li>
      <li class="fruit_rouge">Cerise</li>
      <li class="agrume">Pamplemousse</li>
      <li id="favoris" class="fruit_rouge">Fraise</li>
      <li class="fruit_rouge">Groseille</li>
      <li class="agrume">Citron</li>
      <li class="fruit_rouge">Mûres</li>
    </ul>

    Faites en sortes de :

    1. afficher tous les agrumes en vert
    2. afficher tous les fruits rouges en rouge
    3. afficher le fruit favoris en noir, et en majuscule
    4. afficher le texte 'mon fruit préféré' à coté du fruit "favoris"


    Exemple de code JQuery pour y arriver :



    Résultat attendu :



    Autres méthodes

    JQuery étant une bibilothèque conçu avant tout pour manipuler le DOM, vous trouverez un très grand nombre de méthodes permettant de modifier le DOM d'une page web. Nous ne les verrons pas toutes en cours, mais je vous demanderai d'en utiliser certaines plus tard, dans les TP. Voici la liste de toutes les méthodes proposées par JQuery : http://api.jquery.com/. Dans cette page, vous n'avez pas seulement des méthodes concernant le DOM, mais c'est la que vous trouverez toutes les méthodes existantes, et les manières de s'en servir. Découvrons-en quelques unes rapidement :


    .addClass()

    Permet de rajouter dynamiquement une classe à un élément

    .attr()

    Lit ou modifie les attributs d'une balise HTML. Semblable à .html(), mais ça concerne seulement les attributs de la balise, et non son contenu.

    .val()

    Lit ou modifie la valeur d'un champ de formulaire (que ce soit un input text, un select, etc...)

    .width()

    Lit ou modifie la largeur d'un élément

    .toggleClass()

    Ajoute une classe à un élément si il ne l'a pas. Supprime la classe d'un élément si il l'a déjà.

    .append()

    Ajoute un élément HTML à la suite d'un élément déjà existant



    ...et il y en a beaucoup d'autre ! Donc à vous de rechercher la méthode qui correspond à votre besoin, de bien lire la doc pour comprendre son fonctionnement, et de l'intégrer correctement à votre projet.

    Voici par exemple la section "manipulation du DOM" de la doc JQuery : https://api.jquery.com/category/manipulation/

  • Événements

    Un des grands rôles de Javascript dans une page web, c'est de réagir à des événements, souvent initier par l'utilisateur, et de produire un résultat particulier (afficher un message, effectuer une action, faire disparaître quelque chose, etc...). Si par exemple l'utilisateur clic sur un bouton, on souhaite qu'il se passe quelque chose. Et bien on pourra mettre en place un événement "clic" sur le bouton en question, et lui associer une fonction ou tout type de comportement, lors du déclenchement de cet événement.

    JQuery dispose d'un ensemble de méthodes qui permettent de gérer beaucoup de types d’événements émis par le navigateur, et souvent, d'en simplifier l'utilisation. Pour utiliser un événement sur un élément, il suffit de :

    1. commencer par sélectionner un ensemble d'éléments
    2. y associer les méthodes JQuery liées aux événements
    3. définir un comportement quand l'éventement sera déclenché


    Voici quelques grandes familles d’événements :

    • événements venant de la souris (ex : clic)
    • événements venant du clavier (ex : appuyer sur la touche échappe)
    • événements venant des formulaires (changement de sélection dans une liste déroulante)
    • événements venant du navigateur (ex : scroll)
    • etc...


    JQuery permet d'accéder à tous ces événements de différentes manières, et parfois plus simplement qu'en vanillaJS. Toutefois, les performances de votre page web peuvent être très impactées par cette surcouche JQuery, les événements étant des choses qui peuvent consommer beaucoup de ressources.


    Événements provenant de la souris

    Pour découvrir l'utilisation de base des événements avec JQuery, nous allons mettre en place un simple bouton qui affichera l'heure lorsque l'on clic dessus. Copiez le code ci-dessous dans votre sandbox :

    <h2>Clic sur bouton, et modification du DOM</h2>
    <input type="button" value="Afficher la date" id="changeDate" />
    <span id="displayDate">Cliquez sur le bouton pour afficher la date</span>

    Une fois que c'est fait, mettez en place un événement clic sur le bouton dans votre fichier sandbox.js. Il devra afficher la date en cours dans le span "displayDate" :


    Pour cet exemple, une autre technique est possible, en utilisant la méthode .click() à la place de .on('click'). Vous pouvez essayer si vous le souhaitez.


    Résultat attendu :

    [video ?]


    Événement provenant du clavier

    Pour tester les évenement duclavier, nous allons faire disparaitre un block de texte lorsque l'utilisateur appuie sur la touche "Echap". Copiez ce code dans votre fichier .html :

    <h2>Clavier</h2>
    <div id="info" style="width:200px; height:200px; background-color:blue;">Je dois disparaitre quand l'utilisateur appuie sur échap</div>

    Ensuite, écrivez un bout de script qui fait disparaître la div "info" lorsque l'utilisateur va relâcher la touche "Echap" :



    Résultat attendu :

    [video ?]

    Et voila ! Si vous faites le test dans votre sandbox, le block d'information bleu va disparaître lorsque la touche "Echap" sera relâchée par l'utilisateur.


    Événements provenant des formulaires

    Afin d'essayer les évenements liés aux ééments de formulaires d'une page web, nous allons afficher une liste déroulante permettant d choisir entr eplusieurs langues, puis lorsque l'utilisateur en choisi une nous lui afficherons sa sélection dans un texte à côté. Copiez-collé ce code HTML :

    <h2>Formulaires</h2>
    <select id="langues">
      <option>Anglais</option>
      <option>Français</option>
      <option>Espagnol</option>
      <option>Allemand</option>
    </select>
    <br />
    Vous avez choisi : <span id="selected_language"></span>

    Ensuite, mettez en place un événement qui se déclenchera lorsque l'utilisateur va changer de langue dans la liste. Quand l’événement se déclenchera, on affichera la langue sélectionnée dans le span "selected_language".



    Autres types d'événements

    Vous trouverez de nombreux événements JS disponibles via JQuery, tel que le montre la page de la documentation : https://api.jquery.com/category/events/

    Voici quelques exemples :

    • .mouseover() : réagit lorsque la souris passe par dessus l'élément sélectionné (ex : sur la div info)
    • .focus() : se déclenche selon l’événement "focus" de JS (ex : quand on clique dans un champ texte pour saisir un texte)(exemple avec focusin et focusout)
    • .scroll() : se déclenche lorsque l'utilisateur scroll dans sa fenêtre (ex : nombre de pixels par rapport au haut de la page)
    • etc...


  • Effets & animations

    Une des fonctionnalités intéressante du "noyau" de JQuery, c'est qu'il embarque quelques méthodes qui permettent de faire des animations simples dans le DOM. Les animations et effets visuels sont relativement complexes à coder "à la main", donc JQuery peut être très utile pour dynamiser un peu votre affichage, sans avoir à coder vous même vos propres effets.

    Le fonctionnement est à peu près le même que les méthodes standard, à savoir :

    1. sélectionner un ensemble d'éléments
    2. lui appliquer l'effet désiré via une méthode dédiée
    3. paramétrer l'effet suivant nos besoins (quel taille ? quel vitesse ? quel easing ?)




    Un exemple simple, la méthode .toggle()

    Une des méthodes d'effets couramment utilisée, c'est la méthode .toggle(). Elle permet de faire disparaître ou apparaître un élément, sans se soucier de savoir si l'élément est déjà visible. C'est un besoin récurrent en développement web. Voici comment procéder.

    Nous allons mettre un bouton dans notre sand box, qui affichera - ou fera disparaître - deux paragraphes contenant un Lorem Ipsum. Commencez par copier ceci dans votre page HTML :

    <input type="button" id="toggle" value="Afficher le texte" />
    <br />
    <p style="display:none;" class="lorem">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis deserunt
    mollit anim id est laborum."
    </p>
    <p style="display:none;" class="lorem">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis deserunt
    mollit anim id est laborum."
    </p>


    Ensuite, dans votre fichier JS :

    1. mettre en place un événement sur le clic du bouton
    2. faire un toggle sur les classes "lorem"


    Voici ce que vous devriez avoir :



    Désormais, quand on clic sur le bouton, les deux paragraphes de Lorem apparaissent ou disparaissent. L'effet est relativement simple, mais il y a déjà un peu de code à produire pour arriver au même effet si vous auriez voulu le faire vous même.

    Voici un exemple plus révélateur de l’intérêt de cette méthode. On va pouvoir paramétrer la manière dont on veux que les élément apparaissent ou disparaissent. Moins vite ? Disparition en douceur ? 

    Voici comment procéder :



    Ici, on donne des paramètres particulier à notre méthode .toggle(). Et le rendu n'est pas du tout le même. Vérifier dans votre sand box : l'apparition ou la disparition des éléments se fait de manière plus douce.



    Une méthode plus complète : .animate()

    Avec cette méthode, vous allez pouvoir jouer sur beaucoup plus de paramètres quavec la méthode .toggle(). La méthode .animate() permet de changer la valeur d'une propriété en passant par toutes les valeurs intermédiaires. Ce qui à pour effet de créer une animation, car le passage d'une valeur à l'autre s'étale dans le temps. Voyons un exemple qui pourrait servir à l'animation d'un menu simple.

    Recopiez ce code dans votre page HTML :

    <style>
    .conteneur{
      display:block;
      width:25%;
      font-size:20px;
      padding:5px;  
    }
    #menu_1{background-color: red;}
    #menu_2{background-color: yellow;}
    #menu_3{background-color: green;}
    </style>
    <div class="conteneur" id="menu_1">Menu 1</div>
    <div class="conteneur" id="menu_2">Menu 2</div>
    <div class="conteneur" id="menu_3">Menu 3</div>


    Ensuite, à l'aide de JQuery :

    • utiliser un événement .mouseenter() sur les div "conteneur" pour agrandir doucement une div quand la souris est dessus
    • utiliser un événement .mouseout() sur les div "conteneur" pour retrouver le bonne taille rapidement quand la souris n'est plus dessus

    Exemple de code :



    Cet exemple est un peu plus complexe car on mélange des événements avec la méthode .animate(). Mais si on lit le code, c'est assez simple. 

    Remarquez :

    1. de quelle manière les éléments sont sélectionnés (emploi des classes et de this)
    2. comment on définit la propriété que l'on souhaite modifier (ce sont les options)
    3. les paramètres de vitesse et de easing qu'on peut - ou non - déterminer


    Je peux vous assurer que même pour des choses relativement simple comme cela, il faut déjà avoir un bon petit niveau en programmation pour les réaliser proprement est rapidement. Et je ne vous parle même pas de l’interopérabilité entre les différents supports (navigateurs, version, os, devices, etc...). Donc même si les possibilités sont assez restreintes en utilisant seulement le noyau JQuery, on a tout un panel d'outils relativement efficaces sur lesquels s'appuyer. On peux les utiliser directement, ou bien utiliser des plugins qui les exploitent dans un but précis. 

    Exemples d'utilisation :

    1. faire un joli menu dynamique et responsive
    2. coder un carousel avec de nombreuses options
    3. afficher une fenêtre modale
    4. et bien d'autres choses diverses et variées...


    Vous trouverez la liste des méthodes d'animations et d'effets disponible dans le noyau de JQuery sur cette page : https://api.jquery.com/category/effects/

  • Plugins

    JQuery est une librairie qui peux s'utiliser seule, mais on y branche souvent des plugins qui vont permettre de faire quelque chose en particulier (exemple : un carousel). Vous en trouverez de très nombreux sur Internet, la plupart du temps gratuit. Comme nous l'avons vu avec Bootstrap, nombreux de ses composants fonctionnent grâce à JQuery.


    Voici des exemple de plugins JQuery :


    Certains plugins changent radicalement votre site (ex : multiscroll), et d'autres ne seront utiles que pour une fonctionnalité particulière (ex : timeline).


  • Ajax & JSON

    Jquery peux aussi être utilisé pour faire des appels Ajax de manière plus propre et pluis rapide qu'en utilisant le vanilla JS avec l'objet XHR.

  • Dérivés

    Parler vite fait de JQuery mobile et JQuery UI. Mais tout ça à l'air d’être fini...



  • Plugin JS sans Jquery

    Liste plugins vanilla JS : https://morioh.com/p/5059b70d70e6

    Essayer la modale : tingle.js


    Un slider en vanillaJs : https://glidejs.com/docs/setup/


    Liste de plugins vanillaJS : https://www.jssor.com/ (attention, offre commerciale, payant dans certains cas)