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，今天就分享到這裡。感興趣的同學可以去嘗鮮下哈，歡迎一起留言讨論。