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
Author: Juan (-J0hn-)
Links: Source Code / Demo, Dribbble Shot
Created on: December 12, 2019
Made with: HTML, SCSS, JS
Tags: javascript, css, animation, carousel
2. 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)
Links: Source Code / Demo
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
Carousel / Slider slideshow showing 3D like boxes using only Vanilla JS and CSS 3D perspective
Author: Jonathan Ching (chingy)
Links: Source Code / Demo
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
Author: Elec (elecweb)
Links: Source Code / Demo, Www.f8.com
Created on: October 28, 2019
Made with: HTML, SCSS, Babel
Tags: carousel, scroller, momentum, kinetic, slideshow
5. 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)
Links: Source Code / Demo
Created on: September 9, 2019
Made with: HTML, CSS, JS
Tags: gallery, carousel, viewer, tiles, toggle
6. Perspective Carousel Vanilla Js
Vanilla js perspective carousel with bullet functionality
Author: Flowrome (flowrome)
Links: Source Code / Demo
Created on: August 29, 2019
Made with: HTML, SCSS, JS
7. 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)
Links: Source Code / Demo
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
Author: iamJoey (YousifW)
Links: Source Code / Demo
Created on: July 4, 2019
Made with: HTML, CSS, JS
Tags: carousel, slider, javascript, touch, infinite
9. 3D Product Carousel Transition
Author: @keyframers (keyframers)
Links: Source Code / Demo, Video, Dribbble Shot, Cdpn.io, Dribbble.com, Youtu.be, Youtu.be, Youtube.com, Twitter.com, Twitch.tv, Patreon.com
Created on: June 26, 2019
Made with: HTML, SCSS, JS
Tags: keyframers, 3d, shop, animation, shoe
10. Marquee-like Content Scrolling
Scrolling Content (Marquee Effect)
Author: Coding Journey (Coding_Journey)
Links: Source Code / Demo
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
Just trying out the CSSTransitionGroup add-on! And testing some stuff (= Original one: http://codepen.io/andyNroses/pen/KaENLb
Author: Fernando Gomes (fcgomes92)
Links: Source Code / Demo
Created on: February 21, 2017
Made with: HTML, SCSS, Babel
Tags: react, carousel, css, animation, custom
12. Carousel YoutubeMusic
Author: victor tuesta ascoy (tuesta)
Links: Source Code / Demo
Created on: March 11, 2019
Made with: HTML, CSS, JS
13. 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)
Links: Source Code / Demo, Www.blobmaker.app
Created on: February 23, 2019
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-blob, animation, perspective, anime.js
14. Mouse Driven Vertical Carousel
Author: Tomislav Jezidžić (tjezidzic)
Links: Source Code / Demo
Created on: January 21, 2019
Made with: HTML, SCSS, JS
15. Simple Swiping Slider
Author: Katia (katiasmet)
Links: Source Code / Demo
Created on: January 7, 2019
Made with: HTML, CSS, Babel
Tags: cpc-peach, slider, ui, codepenchallenge
16. 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)
Links: Source Code / Demo
Created on: October 24, 2018
Made with: HTML, CSS, JS
Tags: flexbox, testimonial, landing-page
17. 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)
Links: Source Code / Demo
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
18. Basic Vanilla JS Carousel
Author: Andrew Zamora (Supra_01)
Links: Source Code / Demo
Created on: September 17, 2018
Made with: HTML, CSS, JS
19. CSS 3D Carousel Room
Author: Daniel Velasquez (Anemolo)
Links: Source Code / Demo
Created on: June 3, 2018
Made with: HTML, SCSS, JS
20. Path Slider Basic Demo
Author: lmgonzalves (lmgonzalves)
Links: Source Code / Demo
Created on: March 7, 2018
Made with: HTML, SCSS, JS
21. Infinity Carousel
Author: leusrox (leusrox)
Links: Source Code / Demo
Created on: July 4, 2017
Made with: HTML, CSS, JS
Tags: infinity, carousel, css, js
22. Vanilla JS Carousel
Author: Marcus Michaels (marcusmichaels)
Links: Source Code / Demo
Created on: January 13, 2019
Made with: HTML, CSS, JS
23. Simple Vanilla JavaScript Carousel
Author: Forbes Gray (forbesg)
Links: Source Code / Demo
Created on: July 25, 2016
Made with: HTML, SCSS, JS
24. Carousel
A simple carousel
Author: DobladoV (dobladov)
Links: Source Code / Demo
Created on: August 4, 2016
Made with: HTML, Sass, JS
Tags: carousel, music, gallery, css, player
25. Carousel Team
Concept carousel with some basic functions such as auto play. See: Chrome, Safari and firefox (bug)
Author: Marco Barría (fixcl)
Links: Source Code / Demo
Created on: November 23, 2014
Made with: HTML, SCSS, JS
26. Owl Carousel Slider With Animation
owl carousel slider with animation, image comes with ease on slide change
Author: FinByz Tech Pvt. Ltd. (finbyz)
Links: Source Code / Demo
Created on: September 6, 2019
Made with: HTML, CSS, JS
Tags: owl carousel, gsap, animation, css, finbyz
27. 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)
Links: Source Code / Demo
Created on: September 5, 2018
Made with: HTML, CSS, Babel
Tags: owl.js
28. Javascript Carousel Slider
Author: Rubias (rublaq)
Links: Source Code / Demo
Created on: October 23, 2019
Made with: HTML, CSS, JS
29. Swipe Carousel
Author: Bao Dang (bdang)
Links: Source Code / Demo
Created on: May 15, 2015
Made with: HTML, CSS, JS
30. 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)
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, CSS, JS
Tags: slider, card, movie card, pixelatedore
31. Portfolio Carousel With Synchronized Sliders
Author: lmgonzalves (lmgonzalves)
Links: Source Code / Demo
Created on: August 15, 2018
Made with: HTML, SCSS, JS
More Awesome Lists:
Share: