vue-snap is a lightweight, performant Vue.js slider/carousel component that uses CSS Scroll Snap to automatically snap slide items to the boundary.
How to use it:
1. Import necessary resources:
import Vue from 'vue' import VueSnap from 'vue-snap' import 'vue-snap/dist/vue-snap.css'
2. Register the component.
Vue.use(VueSnap); // or globally import { Carousel, Slide } from 'vue-snap' import 'vue-snap/dist/vue-snap.css' export default { components: { Carousel, Slide } }
3. Add slides to the carousel.
<carousel> <slide> Slide 1 </slide> <slide> Slide 2 </slide> <slide> Slide 3 </slide> ... </carousel>
Preview:
Changelog:
v0.7.1 (05/07/2021)
- Added: Mounted event
- Fixed: Prevent duplicated event page trigger
v0.7.0 (02/09/2021)
- Removed maxPages and its calculation
- Replace changeSlide with simpler goToSlide, for consistent behavior with exposed go-to-page API + removal of dependent method that is not in use anymore
- Split getting current page index from setting it, supporting passing the index from outside, for example goToSlide method, so in some cases the index will change, even if there was no scroll event.
- Fix support for calculating a proper current slide index, when there is nothing left to scroll
v0.6.6 (12/06/2020)
- update
v0.6.5 (12/05/2020)
- update
v0.6.4 (11/29/2020)
- changeSlide, BoundLeft, BoundRight inside slot-scope
v0.6.3 (11/23/2020)
- updated elementScrollBy function name
- updated dependencies
v0.6.2 (11/01/2020)
- Fixed Slide children method
v0.6.1 (09/24/2020)
- Removed maximum node version range
- Removed Node version max range
- Added dynamic tag support
- Added i18n support with proper validation
- Reset list-style CSS
v0.5.1 (09/21/2020)
- update
v0.5.0 (09/17/2020)
- Added Emit page and bound events
- Updated package
v0.4.0 (09/15/2020)
- Added Ability to disable arrows and arrowsOnBound
- Bugs fixed
v0.3.0 (09/05/2020)
- Added Dynamic slides support
v0.2.0 (08/29/2020)
- Added VueLazy lib
- Updated Dependencies
- Deleted Static height in wrapper
- Deleted Old directives
v0.1.0beta 9 (08/27/2020)
- Added Missing type for button arrows
Download Details:
Author: bartdominiak
Live Demo: https://vue-snap.vercel.app/?path=/docs/carousel--default
Download Link: https://github.com/bartdominiak/vue-snap/archive/master.zip
Official Website: https://github.com/bartdominiak/vue-snap
Install & Download: