Graphiste » Blog » Webdesign » 3 Carrousels en HTML, CSS, JS

3 Supers Carrousels développés en HTML, CSS et JS

Les carrousels vous serviront pour mettre en valeur la richesse de contenu sur votre page. Entre gros titres, textes, photos, vous avez vraiment beaucoup de choix pour son apparence et son design. Mais encore faut-t-il avoir des bases de connaissances en HTML et CSS pour développer son premier carrousel ! N’oublions pas qu’il existe également des extensions pour WordPress qui permettent de créer des carrousels. Plus simplement, c’est certains, mais souvent très limités en terme de créativité et de design. Grâce à l’expérience utilisateur que la création d’un Carrousel sur-mesure vous proposent, j’ai décidé de vous établir une liste de 3 carrousels intéressants et à mettre en œuvre sur son site. Vous pourrez simplement adapter à votre guise, grâce à quelques connaissances de bases.

Carrousels en CSS

1 – Carrousel développé en 3D

Ce type de carrousel peut vous servir si vous souhaitez afficher une galerie photo sur votre site. Lorsque l’internaute clique, il peut scroller horizontalement et les photos défilent en fonction de son mouvement. Ce type de carrousel est sympa si vous êtes photographe, testez-le sur une section de votre site web !

2 – Carrousel animé et design

Les animations sur ce carrousels sont juste parfaites ! Grâce au JavaScript, vous pouvez faire varier les animations du carrousel en fonction des scrolls de la souris, ou bien même des clics. Vous pouvez facilement intégrer celui-ci à votre site ! Pour remplacer le visuel, vous devrez simplement l’exporter à la bonne taille et le remplacer par les valeurs dans les balises <figure>. Les dimensions de chaque photo est de 320px par 130px. Veilliez bien à augmenter la résolution à l’export de votre fichier pour qu’il soit intégré avec la meilleure qualité possible ! Vous pouvez également développer votre propre design sur ce magnifique carrousel !

3 – Carousel simple et épuré

Ce carrousel présente un design très épuré au fond vert et permettant de mettre clairement en valeur vos photos ! Il a la particularité d’avoir été créés en SCSS afin de faciliter les attributs grâce aux variables. Cela pourrait vous donner quelques idées de design et sublimer votre page web. Vous pouvez donc l’utiliser sur votre site en l’adaptant à vos besoins. Les photos sont au format portrait mais vous pouvez également intégrer un format paysage ou carré.

Découvrir d’autres articles