Collection
Post cover
Created 6 month back

Top 21 VueJS Carousels from GitHub & CodePen

Top 21 collection of free VueJS carousel code examples: responsive, horizontal and vertical Collected from GitHub, CodePen and other resources.

Vue Card Carousel

Author: Will; August 28, 2018

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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 for demonstration but it could be made generic via props.

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

Dependencies: vue.js

Vue Glide

Author: Anton Reshetov; July 30, 2018

Links: github page, home page

A slider and carousel as Vue.js component on top of the Glide.js.

Empathy Vue Carousel

Author: empathy.co; September 2, 2019

Links: github

Vue component of a super configurable carousel.

Vue Carousel Card

Author: jekorx; January 5, 2019

Links: github

Vue Cat Carousel

Author: Hans Sagita; November 12, 2019

Links: github

Simple, customizable, reactive and lightest carousel.

Post cover

Vue Snap

Author: Bartosz Dominiak; June 7, 2020

Links: GitHub

Vue-snap lightweight carousel based on CSS scroll snapping (Vue 2/3).

Post cover

Hooper

Author: Baianat; December 19, 2018

Links: github page, home page

A customizable accessible carousel slider optimized for Vue.

Vue 3 Carousel

Author: Abdelrahman Ismail; April 25, 2020

Links: github

Modern lightweight Vue 3 carousel component.

Vue Carousel + Bootstrap Vue Cards

Author: David Hutto; June 11, 2019

Links: demo and code

Made with: HTML / CSS / JS (Babel)

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

Responsive: yes

Dependencies: bootstrap.css, bootstrap-vue.css, vue.js, bootstrap-vue.js, vue-carousel.js

Animated Vue Carousel

Author: Luke Taylor; April 3, 2017

Links: demo and code

CSS animated VueJS carousel

Made with: HTML / CSS (Sass) / JS (Babel)

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

Responsive: yes

Vue Carousel

Author: SSENSE; December 30, 2016

Links: github page, home page

A flexible, responsive, touch-friendly, carousel for Vue.js.

Slides use Vue's built-in slot system, allowing you to display any type of content in slides (including other Vue components!)

Breakpoints in Vue Carousel can be configured to have different slide counts depending on the device's display resolution.

Touch and drag supported on both desktop and mobile devices.

Slick For Vue.js

Author: Stanislav Karpov; October 27, 2016

Links: github page

Vue component for make Slick-carousel.

Vue Product 360

Author: moveideas; April 30, 2020

Links: github

Loop a series of images in a 360 rotatation carousel with the vue-product-carousel, a plugin for Vue.js

Post cover

Vue Carousel

Author: Fengyuan Chen; January 26, 2019

Links: github page, home page

Carousel component for Vue.js.

Slider Carousel

Author: Dima; January 6, 2019

Links: demo and code

Made with: HTML (Pug) / CSS (Stylus) / JS

Vue carousel.

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

Responsive: no

Dependencies: vue.js

Vue Card Carousel

Author: TheQuail13; March 6, 2020

Links: github

Sliding card carousel for list viewing.

Post cover

Vue Slick Carousel

Author: GSSHOP; November 27, 2019

Links: github

Vue slick Carousel with true SSR written for faster luxstay.

3D Vue Carousel

Author: mayccoll; December 2, 2019

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: vue.js, vue-carousel-3d.js

Responsive And Two Related Carousels

Author: Lukasz Florczak; April 24, 2019

Links: demo and code, github page

Made with: HTML (Pug) / CSS (SCSS) / JS (Babel)

Vue-agile is a carousel component for Vue.js inspired by Slick. Simple, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).

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

Responsive: yes

Dependencies: vueagile.css, font-awesome.css, vue.js, vue-agile.js

Vue Splide

Author: Splidejs; May 29, 2020

Links: github

Vue Splide is the Vue component for the Splide slider/carousel.

Beautiful, flexible and touch supported 3D Carousel for Vue.js.

Author: Vladimir; November 29, 2017

Links: github page, home page

With CSS transition you will get nice and smooth slide transition in 3D effect

Inside slides you can display any html content or some other Vue component

Touch support enabled on mobile devices

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback