Are you looking to enhance your website’s user interface with dynamic content sliders? Look no further! We’ve curated a collection of 45+ JavaScript carousel examples sourced from platforms like CodePen and GitHub, designed to elevate your UI/UX game.
JavaScript carousels, also known as sliders or slideshows, are indispensable tools in modern web development. These examples showcase the versatility and efficiency of JavaScript in creating captivating user interfaces. Whether you’re a beginner or an experienced developer, these examples offer valuable insights and inspiration.
With features like responsiveness, animation, and customizability, JavaScript Carousels streamline the process of creating engaging content sliders. They not only benefit developers by simplifying carousel development but also enhance the overall user experience on websites.
Each example serves as a valuable resource for developers striving to stay ahead in web development. By studying and implementing these examples, developers can explore innovative techniques and best practices in UI design. From basic image carousels to intricate carousel games, there’s something for every project and skill level.
These examples aren’t just beneficial; they’re essential for anyone aiming to create polished and dynamic user interfaces. So why wait? Dive into our collection of JavaScript carousel examples today and elevate your web development game!
1. Infinite rotating carousel
See the Pen
Infinite rotating carousel with 100 list items (#cpc-100-list) by Angela Galliat (@agalliat)
on CodePen.
Author: Angela Galliat @agalliat
Links: Source Code / Demo
Created on: September 15, 2020
Made with: HTML, CSS, JS
2. Carousel
See the Pen
Carousel by DobladoV (@dobladov)
on CodePen.
Author: DobladoV @dobladov
Links: Source Code / Demo
Created on: August 4, 2016
Made with: HTML, CSS(Sass), JS
3. Mouse Driven Vertical Carousel
See the Pen
Mouse Driven Vertical Carousel by Tomislav Jezidžić (@tjezidzic)
on CodePen.
Author: Tomislav Jezidžić @tjezidzic
Links: Source Code / Demo
Created on: January 21, 2019
Made with: HTML, CSS(SCSS), JS
4. Owl Carousel Slider With Animation
See the Pen
owl carousel slider with animation by FinByz Tech Pvt. Ltd. (@finbyz)
on CodePen.
Author: FinByz Tech Pvt. Ltd. @finbyz
Links: Source Code / Demo
Created on: September 6, 2019
Made with: HTML, CSS, JS
5. Pure CSS Carousel with Thumbnails
See the Pen
Pure CSS Carousel with Thumbnails by Ronny Siikaluoma (@siiron)
on CodePen.
Author: Ronny Siikaluoma @siiron
Links: Source Code / Demo
Created on: December 1, 2019
Made with: HTML, CSS (SCSS)
6. Javascript Carousel Slider
See the Pen
Javascript Carousel Slider by Rubias (@rublaq)
on CodePen.
Author: Rubias @rublaq
Links: Source Code / Demo
Created on: October 23, 2019
Made with: HTML, CSS , JS
7. Carousel
See the Pen
Carousel by Jesse (@WillyW)
on CodePen.
Author: Jesse @WillyW
Links: Source Code / Demo
Created on: April 12, 2019
Made with: HTML, CSS, JS
8. Carousel Team
See the Pen
Carousel team by Marco Barría (@fixcl)
on CodePen.
Author: Marco Barría @fixcl
Links: Source Code / Demo
Created on: November 24, 2014
Made with: HTML, CSS(SCSS), JS
9. Carousel With Progress Bar
See the Pen
Carousel with progress bar by Juan (@J0hn03cb1ac8a4)
on CodePen.
Author: Juan @J0hn03cb1ac8a4
Links: Source Code / Demo
Created on: December 12, 2019
Made with: HTML, CSS(SCSS), JS
10. Carousel Slider With Owl.js
See the Pen
Carousel Slider With Owl.js by Envato Tuts+ (@tutsplus)
on CodePen.
Author: Envato Tuts+ @tutsplus
Links: Source Code / Demo
Created on: September 5, 2018
Made with: HTML, CSS, JS(Babel)
11. Simple Swiping Slider
See the Pen
Simple Swiping Slider by Katia (@katiasmet)
on CodePen.
Author: Katia @katiasmet
Links: Source Code / Demo
Created on: January 8, 2019
Made with: HTML, CSS, JS(Babel)
12. Simple Vanilla JavaScript Carousel
See the Pen
Simple Vanilla JavaScript Carousel by Forbes Gray (@forbesg)
on CodePen.
Author: Forbes Gray @forbesg
Links: Source Code / Demo
Created on: July 25, 2016
Made with: HTML, CSS(SCSS), JS
13. Marquee-like Content Scrolling
See the Pen
Marquee-like Content Scrolling by Coding Journey (@Coding_Journey)
on CodePen.
Author: Coding Journey @Coding_Journey
Links: Source Code / Demo
Created on: May 27, 2019
Made with: HTML, CSS, JS
14. Swipe Carousel
See the Pen
Swipe Carousel by Bao Dang (@bdang)
on CodePen.
Author: Bao Dang @bdang
Links: Source Code / Demo
Created on: May 15, 2015
Made with: HTML, CSS, JS
15. 3D Carousel Slider Vanilla JS
See the Pen
3D Carousel/Slider (CSS 3D & Vanilla JS) by Jonathan Ching (@chingy)
on CodePen.
Author: Jonathan Ching @chingy
Links: Source Code / Demo
Created on: November 20, 2019
Made with: HTML(Pug), CSS (SCSS), JS
16. Vanilla JS Carousel
See the Pen
Vanilla JS Carousel by Marcus Michaels (@marcusmichaels)
on CodePen.
Author: Marcus Michaels @marcusmichaels
Links: Source Code / Demo
Created on: January 14, 2019
Made with: HTML, CSS, JS
17. Flexbox Testimonial Carousel
See the Pen
Flexbox Testimonial Carousel by James Pistell (@pistell)
on CodePen.
Author: James Pistell @pistell
Links: Source Code / Demo
Created on: October 24, 2018
Made with: HTML, CSS, JS
18. 3D Product Carousel Transition
See the Pen
Shoe Swap ???? | 3D CSS Product Transition Tutorial | @keyframers 2.9.0 by @keyframers (@keyframers)
on CodePen.
Author: @keyframers @keyframers
Links: Source Code / Demo
Created on: June 27, 2019
Made with: HTML, CSS(SCSS), JS
19. Infinity Carousel
See the Pen
Infinity Carousel by leusrox (@leusrox)
on CodePen.
Author: leusrox @leusrox
Links: Source Code / Demo
Created on: July 5, 2017
Made with: HTML, CSS, JS
20. Momentum Carousel
See the Pen
Momentum carousel by Elec (@elecweb)
on CodePen.
Author: Elec @elecweb
Links: Source Code / Demo
Created on: October 28, 2019
Made with: HTML, CSS (SCSS), JS(Babel)
21. Movie Card Slider
See the Pen
Movie card slider by Gerry (@PixelatedOre)
on CodePen.
Author: Gerry @PixelatedOre
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, CSS, JS
22. Carousel Youtube Music
See the Pen
Carousel YoutubeMusic by victor tuesta ascoy (@tuesta)
on CodePen.
Author: victor tuesta ascoy @tuesta
Links: Source Code / Demo
Created on: March 11, 2019
Made with: HTML, CSS, JS
23. New Year | Holiday Card
See the Pen
New Year | cpc-holiday-card | codepenchallenge by @BrawadaCom (@Anna_Batura)
on CodePen.
Author: @BrawadaCom @Anna_Batura
Links: Source Code / Demo
Created on: December 30, 2020
Made with: HTML (Haml), CSS (Sass), JS
24. Custom Image Carousel
See the Pen
Custom Image Carousel by Jarrod Thibodeau (@jarrodthibodeau)
on CodePen.
Author: Jarrod Thibodeau @jarrodthibodeau
Links: Source Code / Demo
Created on: October 23, 2018
Made with: HTML(Pug), CSS, JS(Babel)
25. Gallery Viewer Carousel / Tiles
See the Pen
Gallery Viewer Carousel / Tiles by Chris Rowlands (@Mrrowlie)
on CodePen.
Author: Chris Rowlands @Mrrowlie
Links: Source Code / Demo
Created on: September 9, 2019
Made with: HTML, CSS, JS
26. Portfolio Carousel With Synchronized Sliders
See the Pen
Portfolio Carousel with Synchronized Sliders by lmgonzalves (@lmgonzalves)
on CodePen.
Author: lmgonzalves @lmgonzalves
Links: Source Code / Demo
Created on: August 15, 2018
Made with: HTML, CSS
27. Basic Vanilla JS Carousel
See the Pen
Basic Vanilla JS Carousel by Andrew Zamora (@andrewzamora)
on CodePen.
Author: Andrew Zamora @andrewzamora
Links: Source Code / Demo
Created on: September 17, 2018
Made with: HTML, CSS, JS
28. WebGL Apple Cards
See the Pen
WebGL Apple Cards by smpnjn (@smpnjn)
on CodePen.
Author: smpnjn @smpnjn
Links: Source Code / Demo
Created on: December 15, 2020
Made with: HTML, CSS, JS
29. Perspective Carousel Vanilla Js
See the Pen
Perspective carousel vanilla js by Flowrome (@flowrome)
on CodePen.
Author: Flowrome @flowrome
Links: Source Code / Demo
Created on: August 29, 2019
Made with: HTML, CSS(SCSS), JS
30. Blob Carousel For The Planet
See the Pen
Blob carousel for the planet by Paulina Hetman (@pehaa)
on CodePen.
Author: Paulina Hetman @pehaa
Links: Source Code / Demo
Created on: February 23, 2019
Made with: HTML, CSS, JS
31. CSS 3D Carousel Room
See the Pen
CSS 3D Carousel Room by Daniel Velasquez (@Anemolo)
on CodePen.
Author: Daniel Velasquez @Anemolo
Links: Source Code / Demo
Created on: June 4, 2018
Made with: HTML, CSS(SCSS), JS
32. Simple carousel with JS.
See the Pen
Simple carousel with JS. by luxonauta (@luxonauta)
on CodePen.
Author: luxonauta @luxonauta
Links: Source Code / Demo
Created on: October 7, 2020
Made with: HTML, CSS (SCSS), JS
33. Path Slider Basic Demo
See the Pen
Path Slider Basic Demo by lmgonzalves (@lmgonzalves)
on CodePen.
Author: lmgonzalves @lmgonzalves
Links: Source Code / Demo
Created on: March 8, 2018
Made with: HTML, CSS(SCSS), JS
34. Minimal Carousel with horizontal scroll + snap, mobile & mouse friendly
See the Pen
Minimal Carousel with horizontal scroll + snap, mobile & mouse friendly by Frederic R. (@fredericrous)
on CodePen.
Author: Frederic R. @fredericrous
Links: Source Code / Demo
Created on: September 3, 2020
Made with: HTML, CSS, JS
35. Card Carousel
See the Pen
card-carousel by Max Lykov (@frise)
on CodePen.
Author: Max Lykov @frise
Links: Source Code / Demo
Created on: July 11, 2019
Made with: HTML, CSS(SCSS), JS
36. Slider with infinite loop with drag and scroll – horizontal
See the Pen
Slider with infinite loop with drag and scroll – horizontal by Fabio Ottaviani (@supah)
on CodePen.
Author: Fabio Ottaviani @supah
Links: Source Code / Demo
Created on: July 23, 2020
Made with: HTML, CSS(SCSS), JS (Babel)
37. CSS and JS Infinite Carousel
See the Pen
CSS and JS Infinite Carousel [INTERACTION] by Radu Bratan (@RaduBratan)
on CodePen.
Author: Radu Bratan @RaduBratan
Links: Source Code / Demo
Created on: July 28, 2020
Made with: HTML, CSS (SCSS), JS
38. Infinite Carousel
See the Pen
infinite carousel by iamJoey (@YousifW)
on CodePen.
Author: iamJoey @YousifW
Links: Source Code / Demo
Created on: July 4, 2019
Made with: HTML, CSS, JS
39. Drag and scroll carousel – slider
See the Pen
Drag and scroll carousel – slider by Fabio Ottaviani (@supah)
on CodePen.
Author: Fabio Ottaviani @supah
Links: Source Code / Demo
Created on: July 23, 2020
Made with: HTML, CSS(SCSS), JS (Babel)
40. Slider with infinite loop with drag and scroll
See the Pen
Slider with infinite loop with drag and scroll by Fabio Ottaviani (@supah)
on CodePen.
Author: Fabio Ottaviani @supah
Links: Source Code / Demo
Created on: July 22, 2020
Made with: HTML, CSS(SCSS), JS (Babel)
41. 3D Carousel
See the Pen
3D Carousel (v4 – panorama) by Tom Miller (@creativeocean)
on CodePen.
Author: Tom Miller @creativeocean
Links: Source Code / Demo
Created on: July 21, 2020
Made with: HTML, CSS, JS
42. 3d Carousel Swipe
See the Pen
3d Carousel Swipe by alphardex (@alphardex)
on CodePen.
Author: alphardex @alphardex
Links: Source Code / Demo
Created on: August 4, 2020
Made with: HTML, CSS (SCSS), JS (TypeScript)
43. Carousel
See the Pen
Carousel #1 Attempt by Jake (@Jake_Woods)
on CodePen.
Author: Jake @Jake_Woods
Links: Source Code / Demo
Created on: November 27, 2019
Made with: HTML, CSS(SCSS), JS
44. Product Carousel
See the Pen
Product Carousel by alphardex (@alphardex)
on CodePen.
Author: alphardex @alphardex
Links: Source Code / Demo
Created on: January 19, 2020
Made with: HTML, CSS (SCSS), JS (TypeScript)
45. A Dribble Design Implementation
See the Pen
A Dribble Design Implementation by Sergiu Lucutar (@sergiulucutar)
on CodePen.
Author: Sergiu Lucutar @sergiulucutar
Links: Source Code / Demo
Created on: November 1, 2018
Made with: HTML, CSS (SCSS), JS
46. CSS 3D transform Colorful Animated Carousel
See the Pen
CSS 3D transform Colorful Animated Carousel by Edmundo Santos (@edmundojr)
on CodePen.
Author: Edmundo Santos @edmundojr
Links: Source Code / Demo
Created on: July 31, 2015
Made with: HTML, CSS(SCSS), JS