🌿 Modern, lightweight Vue 3 Carousel powered by CSS Scroll Snap.
The idea behind this plugin is to create a fully responsive and well-optimized carousel. We’ve used modern CSS features like Scroll Snapping, which allows the carousel wrapper to lock onto specific slides or positions after the user finishes scrolling. This approach helps us minimize the library size by including only the essential parts, and it avoids heavy JavaScript computations or CSS hacks.
📕 Example
📺 Props/Events/Slots
Lightweight – Only 4KB, fast and efficient.
No calculations or heavy logic – performance-first approach
Fully responsive – most customization is handled via CSS (e.g. number of visible slides)
ESM bundle with tree-shaking – dead code is automatically eliminated
SSR support – works with frameworks like Nuxt.js 🎉 More here
Vue 3 support 🎉 More here
Modern browser support – compatible with all common browsers More here
pnpm add vue-snap
yarn add vue-snap
npm install vue-snap
import { createApp } from 'vue'
import App from './App.vue'
import VueSnap from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'
const myApp = createApp(App)
myApp.use(VueSnap)
myApp.mount('#app')
import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'
export default {
components: {
Carousel,
Slide
}
}
Check out examples folder for more details or documentation
If you have a feature request then feel free to start a new issue, or just grab existing one.
MIT
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4