8 CSS HTML5 JS carousels for modern website

Ecrit le 26/11/2019
Temps de lecture : 4 minutes
Table des matières

CSS/HTML and JS carousels are often used as quality elements for the user experience (UX) in modern web design.

They allow a qualitative enhancement of content, such as photos, videos or other (menu, links, etc.). If you're looking for a quality carousel to impress your visitors, this easy-to-set carousel list will help. Thanks to CodePen, you will find the HTML5/CSS3 or SCSS-JS code to be modified to your liking for your site in order to customize your site to the best of your ability.

3D Carousel

See the Pen 3D Carousel: navigation by Giulio Mainardi(@mgiulio)on CodePen.dark

This carousel allows 3-dimensional navigation of each of the elements, it is possible to add or remove it at your convenience. Navigation buttons are built in to make it easier and don't have to pass on the visuals. This 3D carousel module can be perfectly suited to the design of your website or application.

Infinite Automatic Carousel

See the Pen Infinite Automatic Carousel by Julien Lejeune (@jlnljn) on CodePen.dark

An automatic carousel rather oriented "Slider" in the end, contains a linear fading horizontal and a timer, it can fit very well in your pages, your website or your application.

The Hover Carousel

See the Pen Hover-Carousel by Yair Even Or(@vsync) on CodePen.dark

A musical ride that has the peculiarity of slide at the same time as you pass on it. Very aesthetic and practical for a worked UX.

CSS Carousel

See the Pen Carousel by DobladoV(@dobladov) on CodePen.dark

A carousel that gives a Mac OS finder effect in image mode. Adaptable in HTML / CSS3 and JS . Pretty easy to integrate and edit.

Instagram API /CSS Carousel

See the Pen Looping Instagram Feed Carousel by Ryan Mulligan(@hexagoncircle)on CodePen.dark

Connect your Instagram bookstore directly to this Carousel, the change is quite simple in the JS. You can adapt it and integrate it on your site easily.

 Team Carousel HTML5 / CSS

See the Pen Carousel team by Marco Barraa(@fixcl) on CodePen.dark

A light carousel, with the ability to change the number of slides to be displayed (nView-3) as well as automation to 2.5 seconds.

WaterWheel Carousel JS / CSS / HTML5

See the Pen 3d carousel 3 by Juan C. Irizar(@carliirizar) on CodePen.dark

A waterwheel format that will indefinitely put the slides back in the presentation chain. Fluid and integrable carousel on your site in a clear and simple way.

Keyboard Control Carousel HTML5 and CSS without JS

See the Pen CSS Carousel with keyboard controls by David Lewis(@dp_lewis) on CodePen.dark

An amazing carousel/slider that can be driven by arrows or very simply on the keyboard, it incorporates a background in cover mode and the ability to add all the content you want.

Une question ? Un besoin ? Un projet ?
1 PAGE DE CONTACT
Notre sélection d'informations 
web chaque vendredi
👥 𝗔𝗩𝗜𝗦 𝗖𝗟𝗜𝗘𝗡𝗧⁣
⁣
" 𝘑𝘶𝘭𝘪𝘦𝘯 𝘦𝘴𝘵 𝘶𝘯 𝘷𝘳𝘢𝘪 𝘤𝘳𝘦́𝘢𝘵𝘪𝘧 𝘢𝘶 𝘴𝘦𝘳𝘷𝘪𝘤𝘦 𝘥𝘦 𝘴𝘦𝘴 𝘤𝘭𝘪𝘦𝘯𝘵𝘴.𝘐𝘭 𝘯𝘦 𝘭𝘢̂𝘤𝘩𝘦 𝘳𝘪𝘦𝘯 𝘵𝘢𝘯𝘵 𝘲𝘶'𝘪𝘭 𝘯'𝘢 𝘱𝘢𝘴 𝘵𝘳𝘰𝘶𝘷𝘦́ 𝘥𝘦 𝘴𝘰𝘭𝘶𝘵𝘪𝘰𝘯, 𝘦𝘵 𝘪𝘭 𝘴'𝘦𝘯𝘨𝘢𝘨𝘦 𝘱𝘭𝘦𝘪𝘯𝘦𝘮𝘦𝘯𝘵 𝘱𝘰𝘶𝘳 𝘦̂𝘵𝘳𝘦 𝘴𝘶̂𝘳 𝘥𝘦 𝘭𝘦𝘶𝘳 𝘳𝘦́𝘶𝘴𝘴𝘪𝘵𝘦.𝘈𝘶-𝘥𝘦𝘭𝘢̀ 𝘥𝘦 𝘭𝘢 𝘥𝘪𝘮𝘦𝘯𝘴𝘪𝘰𝘯 𝘸𝘦𝘣, 𝘴𝘢 𝘤𝘶𝘳𝘪𝘰𝘴𝘪𝘵𝘦́, 𝘴𝘢 𝘷𝘪𝘴𝘪𝘰𝘯 𝘥𝘦𝘴 𝘢𝘱𝘱𝘭𝘪𝘤𝘢𝘵𝘪𝘰𝘯𝘴 𝘦𝘵 𝘴𝘰𝘯 𝘢𝘵𝘵𝘦𝘯𝘵𝘪𝘰𝘯 𝘱𝘰𝘳𝘵𝘦́𝘦 𝘢𝘶𝘹 𝘶𝘴𝘢𝘨𝘦𝘴 𝘦𝘯 𝘧𝘢𝘪𝘵 𝘶𝘯 𝘤𝘰𝘯𝘴𝘦𝘪𝘭𝘭𝘦𝘳 𝘦𝘵 𝘶𝘯 𝘥𝘦́𝘷𝘦𝘭𝘰𝘱𝘱𝘦𝘶𝘳 𝘱𝘳𝘦́𝘤𝘪𝘦𝘶𝘹.𝘊'𝘦𝘴𝘵 𝘶𝘯 𝘷𝘦́𝘳𝘪𝘵𝘢𝘣𝘭𝘦 𝘱𝘢𝘳𝘵𝘦𝘯𝘢𝘪𝘳𝘦 𝘱𝘢𝘴𝘴𝘪𝘰𝘯𝘯𝘦́, 𝘥𝘦 𝘤𝘰𝘯𝘧𝘪𝘢𝘯𝘤𝘦 𝘦𝘵 𝘥𝘦 𝘭𝘰𝘯𝘨 𝘵𝘦𝘳𝘮𝘦... "⁣
⁣
Yves-Henri Robillard | GENIUS⁣
.⁣
.⁣
#agencedecomm #labaule #pornichet #communication #web #event #creation #labauleescoublac #labaulelespins #siteweb #siteinternet #communitymanager #socialmedia
🔎 Nouveau zoom client.⁣
⁣
Nous sommes heureux de pouvoir collaborer avec la @brasserie_le_bis dans la refonte de leur stratégie Social Media.⁣
⁣
Une cuisine maison et familiale, en plein cœur de Pornichet. 🥗 Thomas et son père vous proposent une carte de produits frais et de saison.⁣
.⁣
.⁣
.⁣
.⁣
#pornichet #restaurant #brasserie #pornichetbeach #restaurantpornichet #agencedecommunication #socialmedia #strategiedecommunication #marketing #shooting #shootingphoto
Réalisation du site pour @kissmywheels, spécialiste de trottinettes électriques et accessoires en Suisses. 🛴⁣
⁣
Un branding dynamique, moderne et sportif pour cette jeune société en croissance exponentielle. 🚀⁣
⁣
Nous avons réalisé une plateforme e-commerce, des catalogues personnalisés et personnalisables avec comparateur et stratégie SEO Internationale (Français, Anglais, Allemand)⁣
.⁣
.⁣
.⁣
.⁣
#trottinettes #trottinetteelectrique #trottinette #trottinettefreestyle #communication #webmedia #siteinternet #website #site #seo #sea #referencement #comparateur #labaule #pornichet #suisse
📲 Un grand merci à Kevin pour son retour après la gestion de ses réseaux sociaux et la réalisation de shootings photos.⁣
⁣
➡️ Toutes nos réalisations sont disponibles sur notre site internet.⁣
.⁣
.⁣
.⁣
.⁣
#communitymanager #socialmedia #avisclient #retourclient #labaule #guerande #pornichet #agencecommunication #reseausociaux #gestionreseau #instagram #avispositif #web #webdigital #digital
Un grand merci à @paulys.fr pour son retour sur nos services et nos équipes. 🙌⁣
.⁣
.⁣
.⁣
.⁣
#labaule #labauleescoublac #labaulelespins #retour #retoursclients #retourclient #review #avis #avisgoogle #agencedecommunication #comm #agencedigital #digital
La rentrée arrive à grands pas. Préparez-la avec JAG ! 🚀⁣
⁣
➡️ Septembre marque le début des stratégies digitales à mettre en place pour les fêtes de fin d'année.⁣
⁣
Ne vous y prenez pas au dernier moment. Préparez votre planning avec l'aide de nos équipes. 👥⁣
⁣
N'hésitez pas à nous contacter pour plus d'informations.⁣
.⁣
.⁣
.⁣
.⁣
#labaule #pornichet #agencedecommunication #communication #digital #web #event #socialmedia #reseausociaux #communitymanager #marketplace #guerande
Mise en place d'une nouvelle stratégie Social Media pour @ke.vigne, spécialiste des vins de Bourgogne, notamment du Chablis.🍷⁣
⁣
📸 Réalisation d'un shooting photo, d'une refonte de son Instagram et la mise en place d'une nouvelle stratégie de communication.⁣
⁣
N'hésitez pas à vous rendre sur son site internet www.kevigne.com⁣
.⁣
.⁣
.⁣
.⁣
#vin #whitewine #bourgogone #chablis #labaule #pornichet #communication #socialmedia #vignoble #chablis #caviste #vindefrance #madeinfrance #marketing #communication
🗓️ 𝐂𝐚𝐥𝐞𝐧𝐝𝐫𝐢𝐞𝐫 𝐦𝐚𝐫𝐤𝐞𝐭𝐢𝐧𝐠, 𝐥'𝐢𝐦𝐩𝐨𝐫𝐭𝐚𝐧𝐜𝐞 𝐝𝐞𝐬 𝐝𝐚𝐭𝐞𝐬.⁣
⁣
Afin de préparer au mieux vos prochaines campagnes marketing, nous vous conseillons d'utiliser ou de faire au préalable, un calendrier marketing des événements de l’année à venir.⁣
⁣
Ce dernier, vous permettra d'anticiper les temps forts pour les mois à venir et de prévoir vos campagnes de communication.⁣
⁣
➡️ Si vous n'avez pas le temps de le réaliser, nous vous conseillons de regarder celui du Blog Du Modérateur qui est très complet.⁣
.⁣
.⁣
.⁣
.⁣
#campagnesmarketing #campagnecommunication #calendriermarketing #datesclés #event #events #evenement #labaule #pornichet #socialmedia #journéemondiale #evenementsportif #journéeinternationale
Dernière ligne droite avant les fêtes de fin d'année. Une période chargée pour la majorité des entreprises. 🚀⁣
⁣
➡️Besoin d'aide dans vos stratégies digitales ? JAG est là pour vous aider.⁣
.⁣
.⁣
.⁣
.⁣
#finannee #socialmedia #communitymanagement #labaule #entrepriselabaule #pornichet #guernade #nantes #agencedecommunication #event #evenementiel #marketing #referencement #siteweb
Menu