Collection of free vanilla JavaScript carousel code examples: responsive, horizontal and vertical. Update of December 2019 collection. 14 new items.

Related Articles

  1. CSS Carousels
  2. Bootstrap Carousels
  3. jQuery Carousels
  4. React Carousels
  5. Vue Carousels

Author

  • @BrawadaCom

Made with

  • HTML (Haml) / CSS (Sass) / JS

About a code

New Year Holiday Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: swiper.js

Author

  • smpnjn

Made with

  • HTML / CSS / JS

About a code

WebGL Apple Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • luxonauta

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Simple Carousel with JS

A simple carousel using only JS, Sass and Pug.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.js

Author

  • Angela Galliat

Made with

  • HTML / CSS / JS

About a code

Infinite Rotating Carousel with 100 List Items

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Frederic R.

Made with

  • HTML / CSS / JS

About a code

Minimal Carousel with Horizontal Scroll

A scrollable carousel in few lines of JS and CSS. You can scroll with your fingers or click and drag. The div snaps to the center. Does not use any library like slick, owl carousel, tiny-slider, flickity, ...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Radu

Made with

  • HTML / CSS (SCSS) / JS

About a code

Infinite Carousel with Pure CSS and JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Slider with Infinite Loop with Drag and Scroll - Horizontal

An infinite loop with dragging and mouse scroll with the help of GSAP.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Drag and Scroll Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Slider with Infinite Loop with Drag and Scroll

An infinite loop with dragging and mouse scroll with the help of GSAP.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Tom Miller

Made with

  • HTML / CSS / JS

About a code

3D Carousel Panorama

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • alphardex

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

3D Carousel Swipe

Better experience at mobile.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: hammer.js

Author

  • alphardex

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Product Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Juan

Made with

  • HTML / CSS (SCSS) / JS

About a code

Carousel With Progress Bar

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jake

Made with

  • HTML / CSS (SCSS) / JS

About a code

Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jonathan Ching

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

3D Carousel/Slider (Vanilla JS)

Carousel/Slider slideshow showing 3D like boxes using only Vanilla JS and CSS 3D perspective.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Elec

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Momentum Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chris Rowlands

Made with

  • HTML / CSS / JS

About a code

Gallery Viewer Carousel / Tiles

Image gallery that toggles between carousel and tiled views. Built with vanilla JavaScript. Image URLs stored in JavaScript array.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Flowrome

Made with

  • HTML / CSS (SCSS) / JS

About a code

Perspective Carousel Vanilla JS

Vanilla JS perspective carousel with bullet functionality.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Simone P. M.

Made with

  • HTML / CSS / JS

About a code

Likecarousel

Build a full featured Tinder Like carousel in JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: hammer.js

Author

  • Splidejs

Made with

  • HTML / CSS (SCSS) / JS

About a code

Splide

Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splide.js

Author

  • Max Lykov

Made with

  • HTML / CSS (SCSS) / JS

About a code

Card Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Code Joey

Made with

  • HTML / CSS / JS

About a code

Infinite Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Product Carousel Transition

David Khourshid and Stephen Shaw enter the third dimension building this show-stopping shoe shopping 3D animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Coding Journey

Made with

  • HTML / CSS / JS

About a code

Marquee-like Content Scrolling

Scrolling content (marquee effect).

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Jesse

Made with

  • HTML / CSS / JS

About a code

Carousel

Drag the cards to move them.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Author

  • victor tuesta ascoy

Made with

  • HTML / CSS / JS

About a code

Carousel Youtube Music

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Blob Carousel For The Planet

Author

  • Paulina Hetman

Made with

  • HTML / CSS / JS

About a code

Blob Carousel For The Planet

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

Author

  • Tomislav Jezidžić

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mouse Driven Vertical Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Katia

Made with

  • HTML / CSS / JS (Babel)

About a code

Simple Swiping Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Sergiu Lucutar

Made with

  • HTML / CSS (SCSS) / JS

About a code

A Dribble Design Implementation

Playing around with carousel animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • James Pistell

Made with

  • HTML / CSS / JS

About a code

Flexbox Testimonial Carousel

This is a customer testimonial flexbox for your landing page/website. NO libraries or dependencies, just pure CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jarrod Thibodeau

Made with

  • HTML (Pug) / CSS / JS (Babel)

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Author

  • Andrew Zamora

Made with

  • HTML / CSS / JS

About a code

Basic Vanilla JS Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Daniel Velasquez

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Carousel Room

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • lmgonzalves

Made with

  • HTML / CSS (SCSS) / JS

About a code

Path Carousel Basic

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: anime.js, path-slider.js

Author

  • leusrox

Made with

  • HTML / CSS / JS

About a code

Infinity Carousel

Infinity carousel in JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: hammer.js

Author

  • Edmundo Santos

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Colorful Animated Carousel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css,