45+ JavaScript Carousels

Last Updated on by in JavaScript
JavaScript Carousels

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

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.