轻量级 Vue+css3 轮播图组件Vue-Snap

好东西，都值得被分享！这次给小伙伴们分享一个超强的css3属性 CSS Scroll Snap 实现轮播图功能。

vue-snap 基于 CSS Scroll Snap 实现轻量级轮播图组件。支持单个/多个滚动，不规则大小滚动及懒加载滚动，适配移动端。

特性

• 轻量级（比其他libs轻5-10倍）
• 没有计算或复杂的逻辑（性能）
• 大部分功能仅需css就可实现
• 自由设置需要显示的轮播图数量
• 完全自适应

CSS Scroll Snapping 简单用法

为了更方便学习和了解更多用法，为大家搜集了如下两个网址。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
https://css-tricks.com/practical-css-scroll-snapping/

安装

$ npm i vue-snap -S

全局引入

import Vue from 'vue'
import VueSnap from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

Vue.use(VueSnap)

局部引入

import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

export default {
  components: {
    Carousel,
    Slide
  }
}

提供各种演示实例及API说明

附上文档演示及仓库地址

# 文档地址
https://bartdominiak.github.io/vue-snap/

# 示例地址
https://vue-snap.vercel.app/

# 仓库地址
https://github.com/bartdominiak/vue-snap

ok，今天就分享到这里。感兴趣的同学可以去尝鲜下哈，欢迎一起留言讨论。