Apprenez à piloter un slider Webflow depuis des link blocks placés n'importe où sur votre page. Un court script jQuery clique sur les points natifs du slider : vos contrôles personnalisés mènent à la slide voulue.
Salut, les designers Webflow. Aujourd'hui, on plonge dans le monde savoureux de jQuery et des contrôles de slider personnalisés. Oui, on va faire danser à votre rythme ces petits points statiques sous votre slider Webflow. Nous avons récemment eu un projet où il fallait piloter le slider Webflow avec des link blocks situés en dehors de l'élément slider. (En bref : nous avions un menu en surimpression avec plusieurs link blocks qui devaient amener à des slides précises au clic.) Voici une courte vidéo de nos contrôles personnalisés :
<div style="padding:81.1% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/873388654?badge=0&autopause=0&quality_selector=1&progress_bar=1&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Custom Slider Controls in Webflow"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Bref, nous avons beaucoup cherché sur Google et compris qu'on pouvait passer à une slide donnée en simulant un clic sur le point de navigation de cette slide. Nous avons donc bricolé un script pour ça. Commençons par le script dont vous aurez besoin :
<iframe height="300" style="width: 100%;" scrolling="no" title="Custom Slider Controls" src="https://codepen.io/milkmoonstudio/embed/preview/rNoRzNG?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/rNoRzNG">
Custom Slider Controls</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Prélude à la danse : ce qu'il vous faut
Avant de nous lancer dans l'océan de code, vérifiez que vous avez les éléments suivants :
- Un projet Webflow dans lequel vous voulez mettre en place les contrôles de slider personnalisés. Les classes du slider importent peu. Dans le script, nous appelons la classe native du slider plutôt que des noms définis dans Webflow : .w-slider-dot
Nous ne les affichons même pas dans notre projet : la visibilité de l'élément était réglée sur masqué. - Une connaissance très basique de jQuery (pas de panique, nous vous guidons pas à pas).
Acte 1 : préparer la scène
Commençons par nous assurer que notre projet Webflow est prêt pour un peu d'action jQuery.
Créer le slider :
- Ouvrez votre Webflow Designer.
- Créez un nouvel élément slider.
- Personnalisez-le à votre guise, mais laissez les points sous le slider tels quels, ou masquez-les.
Créer les points personnalisés :
- Créez un nouveau div block et nommez-le controls__wrap.
- Ensuite, dans controls__wrap, créez vos link blocks (un par slide de votre slider) et donnez à chacun la classe slider__controller.
- Stylez ces link blocks comme vous voulez : ce sont vos contrôles, ceux qui vous mèneront à chaque slide de votre slider. Leur ordre correspond à l'ordre de vos slides.
Acte 2 : le ballet jQuery
Passons maintenant au code qui fera danser ces points ! Nous allons utiliser jQuery pour créer une interaction vivante entre nos points personnalisés et les points natifs du slider Webflow.
Ajouter le code :
- Rendez-vous dans vos Site settings (pour toutes les pages) ou dans les Page settings de la page qui contient le slider.
- Sous l'onglet ‘Custom Code’ des Site settings, vous trouverez un havre pour vos scripts personnalisés dans la section ‘Footer code’. Dans les Page settings, l'équivalent est le champ ‘Before </body> tag’ de la zone Custom code. C'est là que notre script jQuery va s'installer.
Coller le script :
- Copiez le script que nous avons partagé plus haut.
- Collez-le dans la section ‘Footer code’ de vos Site settings (ou dans le champ ‘Before </body> tag’ des Page settings si une seule page contient le slider).
Comprendre la magie :
Le script parcourt chaque point personnalisé dans .controls__wrap et, quand on clique sur l'un d'eux, il déclenche un événement tap sur le point natif correspondant du slider Webflow, ce qui affiche la slide voulue.
Acte 3 : le rideau tombe, les applaudissements fusent
Retournez maintenant dans le Designer, cliquez sur publier, et admirez la danse des points sur votre site en ligne ! Vos points personnalisés devraient désormais piloter le slider Webflow et offrir à votre public une expérience sur mesure.
Nous espérons que ça vous aidera autant que ça nous aide. Je ne sais pas qui a eu l'idée de contrôler les points, nous avons simplement trouvé une référence et un extrait de code sur Stack Overflow, puis nous l'avons étoffé. Mais c'est malin, alors profitez-en.
FAQ
Comment créer un lien vers une slide précise d'un slider Webflow depuis l'extérieur du slider ?
Placez un link block n'importe où sur la page et faites-lui simuler un clic sur le point natif correspondant du slider. C'est exactement ce que fait notre script : il parcourt les contrôles personnalisés dans .controls__wrap et, quand on clique sur l'un d'eux, déclenche un événement tap sur le .w-slider-dot correspondant, ce qui amène le slider à cette slide. L'ordre de vos contrôles personnalisés doit correspondre à l'ordre de vos slides.
Peut-on masquer les points par défaut du slider Webflow tout en continuant à les utiliser ?
Oui. Le script a seulement besoin que les points natifs existent dans la page, pas qu'ils soient visibles. Dans notre propre projet, les points étaient masqués via la visibilité de l'élément : les points du slider Webflow faisaient leur travail en coulisses pendant que nos contrôles personnalisés tenaient la vedette.
Où placer le code personnalisé pour les points d'un slider Webflow ?
Collez le script dans la section ‘Footer code’ sous l'onglet ‘Custom Code’ des Site settings (toutes les pages), ou dans le champ ‘Before </body> tag’ des Page settings (uniquement la page qui contient le slider). Ensuite, publiez : le code personnalisé ne s'exécute pas dans le Designer.
Voilà l'essentiel. Si les sliders vous passionnent, nous avons aussi un article sur les sliders verticaux à hauteur automatique dans Webflow. Si vous aimez mettre les choses en mouvement, jetez un œil à notre guide visuel des fonctions d'easing dans Webflow et à notre article sur la maîtrise des animations dynamiques dans Webflow. Pour encore plus de code à copier-coller, nos Webflow cloneables valent le détour, et vous trouverez d'autres articles du genre dans la section How-To de notre blog.
