css轮播图_轻量级 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_Snaphttps://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，今天就分享到这里。感兴趣的同学可以去尝鲜下哈，欢迎一起留言讨论。