35+ JavaScript Carousels - Free Code + Demos

Collection of 35+ JavaScript Carousels. All items are 100% free and open-source. The list also includes responsive javascript carousels, and horizontal.

1. Carousel With Progress Bar

JavaScript Carousels - Carousel with progress bar
Author: Juan (-J0hn-)
Created on: December 12, 2019
Made with: HTML, SCSS, JS
Tags: javascript, css, animation, carousel

2. CSS Carousel

JavaScript Carousels - CSS Carousel
A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Values are hardcoded...
Read More
Author: Will (wa23)
Created on: August 27, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: vue, carousel, slides, css, bootstrap

3. 3D Carousel Slider Vanilla JS

JavaScript Carousels - 3D Carousel Slider Vanilla JS
Carousel / Slider slideshow showing 3D like boxes using only Vanilla JS and CSS 3D perspective
Author: Jonathan Ching (chingy)
Created on: November 19, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: carousel, slider, vanilla, 3d, pure

4. Momentum Carousel

JavaScript Carousels - Momentum carousel
Author: Elec (elecweb)
Created on: October 28, 2019
Made with: HTML, SCSS, Babel
Tags: carousel, scroller, momentum, kinetic, slideshow

5. Gallery Viewer Carousel / Tiles

JavaScript Carousels - Gallery  Viewer Carousel / Tiles
Image gallery that toggles between carousel and tiled views. Built with vanilla Javascript. Image URLs stored in javascript array.
Author: Chris Rowlands (Mrrowlie)
Created on: September 9, 2019
Made with: HTML, CSS, JS
Tags: gallery, carousel, viewer, tiles, toggle

6. Perspective Carousel Vanilla Js

JavaScript Carousels - Perspective carousel vanilla js
Vanilla js perspective carousel with bullet functionality
Author: Flowrome (flowrome)
Created on: August 29, 2019
Made with: HTML, SCSS, JS

7. Vue Card Carousel

JavaScript Carousels - Vue card carousel
A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style which translates the images. Values are hardcoded...
Read More
Author: Will (wa23)
Created on: August 27, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: vue, carousel, slides, css, bootstrap

8. Infinite Carousel

JavaScript Carousels - infinite carousel
Author: iamJoey (YousifW)
Created on: July 4, 2019
Made with: HTML, CSS, JS
Tags: carousel, slider, javascript, touch, infinite

10. Marquee-like Content Scrolling

JavaScript Carousels - Marquee-like Content Scrolling
Scrolling Content (Marquee Effect)
Author: Coding Journey (Coding_Journey)
Created on: May 26, 2019
Made with: HTML, CSS, JS
Tags: marquee, marquee effect, scrolling content, logo slider, coding journey

11. React Carousel - Custom Version

JavaScript Carousels - React Carousel - Custom version
Just trying out the CSSTransitionGroup add-on! And testing some stuff (= Original one: http://codepen.io/andyNroses/pen/KaENLb
Author: Fernando Gomes (fcgomes92)
Created on: February 21, 2017
Made with: HTML, SCSS, Babel
Tags: react, carousel, css, animation, custom

12. Carousel YoutubeMusic

JavaScript Carousels - Carousel YoutubeMusic
Author: victor tuesta ascoy (tuesta)
Created on: March 11, 2019
Made with: HTML, CSS, JS

13. Blob Carousel For The Planet

JavaScript Carousels - Blob  carousel  for the planet
Created for the February 2019 CodePen Challenge Using anime.js and https://www.blobmaker.app for creating Blobs.
Author: Paulina Hetman (pehaa)
Created on: February 23, 2019
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-blob, animation, perspective, anime.js

14. Mouse Driven Vertical Carousel

JavaScript Carousels - Mouse Driven Vertical Carousel
Author: Tomislav Jezidžić (tjezidzic)
Created on: January 21, 2019
Made with: HTML, SCSS, JS

15. Simple Swiping Slider

JavaScript Carousels - Simple Swiping Slider
Author: Katia (katiasmet)
Created on: January 7, 2019
Made with: HTML, CSS, Babel
Tags: cpc-peach, slider, ui, codepenchallenge

16. A Dribble Design Implementation

JavaScript Carousels - A Dribble Design Implementation
Following this design: https://dribbble.com/shots/5376568-Snowboard-Carousel?utm_source=Clipboard_Shot&utm_campaign=cmmonroe&utm_content=Snowboard%20Carousel&utm_medium=Social_Share Images from: https://unsplash.com/ and pngimg.com
Author: Sergiu Lucutar (sergiulucutar)
Created on: October 31, 2018
Made with: HTML, SCSS, JS
Tags: css, css-grid, css-transition, css-transform

17. Flexbox Testimonial Carousel

JavaScript Carousels - Flexbox Testimonial Carousel
This is a customer testimonial flexbox for your landing page/website. NO libraries or dependencies, just pure CSS and JS
Author: James Pistell (pistell)
Created on: October 24, 2018
Made with: HTML, CSS, JS
Tags: flexbox, testimonial, landing-page

18. Custom Image Carousel

JavaScript Carousels - Custom Image Carousel
Wanted to experiment with this prototype of image slicing and combining the pieces together to create the full image in a slider.
Author: Jarrod Thibodeau (jarrodthibodeau)
Created on: October 22, 2018
Made with: Pug, CSS, Babel
CSS Pre-processor: None
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: images, effects, css, javascript, idk

19. Basic Vanilla JS Carousel

JavaScript Carousels - Basic Vanilla JS Carousel
Author: Andrew Zamora (Supra_01)
Created on: September 17, 2018
Made with: HTML, CSS, JS

20. CSS 3D Carousel Room

JavaScript Carousels - CSS 3D Carousel Room
Author: Daniel Velasquez (Anemolo)
Created on: June 3, 2018
Made with: HTML, SCSS, JS

21. Path Slider Basic Demo

JavaScript Carousels - Path Slider Basic Demo
Author: lmgonzalves (lmgonzalves)
Created on: March 7, 2018
Made with: HTML, SCSS, JS

22. Infinity Carousel

JavaScript Carousels - Infinity Carousel
Author: leusrox (leusrox)
Created on: July 4, 2017
Made with: HTML, CSS, JS
Tags: infinity, carousel, css, js

23. Vanilla JS Carousel

JavaScript Carousels - Vanilla JS Carousel
Author: Marcus Michaels (marcusmichaels)
Created on: January 13, 2019
Made with: HTML, CSS, JS

24. Simple Vanilla JavaScript Carousel

JavaScript Carousels - Simple Vanilla JavaScript Carousel
Author: Forbes Gray (forbesg)
Created on: July 25, 2016
Made with: HTML, SCSS, JS

25. Carousel

JavaScript Carousels - Carousel
A simple carousel
Author: DobladoV (dobladov)
Created on: August 4, 2016
Made with: HTML, Sass, JS
Tags: carousel, music, gallery, css, player

26. Carousel Team

JavaScript Carousels - Carousel team
Concept carousel with some basic functions such as auto play. See: Chrome, Safari and firefox (bug)
Author: Marco Barría (fixcl)
Created on: November 23, 2014
Made with: HTML, SCSS, JS

27. Owl Carousel Slider With Animation

JavaScript Carousels - owl carousel slider with animation
owl carousel slider with animation, image comes with ease on slide change
Author: FinByz Tech Pvt. Ltd. (finbyz)
Created on: September 6, 2019
Made with: HTML, CSS, JS
Tags: owl carousel, gsap, animation, css, finbyz

28. Carousel Slider With Owl.js

JavaScript Carousels - Carousel Slider With Owl.js
From How to Build a Full-Screen Responsive Carousel Slider With Owl.js by George M.
Author: Envato Tuts+ (tutsplus)
Created on: September 5, 2018
Made with: HTML, CSS, Babel
Tags: owl.js

29. Javascript Carousel Slider

JavaScript Carousels - Javascript Carousel Slider
Author: Rubias (rublaq)
Created on: October 23, 2019
Made with: HTML, CSS, JS

30. Swipe Carousel

JavaScript Carousels - Swipe Carousel
Author: Bao Dang (bdang)
Created on: May 15, 2015
Made with: HTML, CSS, JS

31. Movie Card Slider

JavaScript Carousels - Movie card slider
some of the functions is not working. its just a demo! i have been working on this for a while and i hope you like it :) works best in fullscreen :)
Author: Gerry (PixelatedOre)
Created on: October 19, 2015
Made with: HTML, CSS, JS
Tags: slider, card, movie card, pixelatedore

32. Portfolio Carousel With Synchronized Sliders

JavaScript Carousels - Portfolio Carousel with Synchronized Sliders
Author: lmgonzalves (lmgonzalves)
Created on: August 15, 2018
Made with: HTML, SCSS, JS