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.
Collection
Vue Snap
Author: Bartosz Dominiak; June 7, 2020
Links: GitHub
Vue-snap lightweight carousel based on CSS scroll snapping (Vue 2/3).
Vue Splide
Author: Splidejs; May 29, 2020
Links: github
Vue Splide is the Vue component for the Splide slider/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
Vue 3 Carousel
Author: Abdelrahman Ismail; April 25, 2020
Links: github
Modern lightweight Vue 3 carousel component.
Vue Card Carousel
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
Vue Slick Carousel
Author: GSSHOP; November 27, 2019
Links: github
Vue slick Carousel with true SSR written for faster luxstay.
Vue Cat Carousel
Author: Hans Sagita; November 12, 2019
Links: github
Simple, customizable, reactive and lightest carousel.
Empathy Vue Carousel
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
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 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 Carousel Card
Author: jekorx; January 5, 2019
Links: github
Hooper
Author: Baianat; December 19, 2018
Links: github page, home page
A customizable accessible carousel slider optimized for Vue.
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.
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
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.
