Aujourd'hui, nous allons voir quelques petits outils qui permettent de mettre en page rapidement un site portfolio.
Swiper JS
Swiper JS est un petit framework qui permet de gérer très rapidement et simplement différents types de sliders. Le grand avantage de ce framework est d'implémenter des sliders responsives, qui fonctionnent sur les appareils mobile avec des gestes touch. Écrit en Vanilla JS.
Lien vers l’exemple pleine page.
Slick
Slick est un petit framework qui permet la même chose que Swiper, et qui en plus comporte une fonction "Largeur variable", très utile pour créer un slider avec des images de ratios variables. Fonctionne avec l'extension JQuery. Également responsive.
https://kenwheeler.github.io/slick/
Lien vers l’exemple pleine page.
Scroll Horizontal
Certains sliders implémentent tout simplement un scroll horizontal au lieu du vertical sur un élément. Voici quelques techniques pour remplacer le scroll vertical par un scroll horizontal :
- Pure CSS > https://css-tricks.com/pure-css-horizontal-scrolling/ (attention, pas responsive)
- JQuery > https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/