css轮播图自动滚动_基于CSS滚动捕捉的轻量级轮播

css轮播图自动滚动

快照 (vue-snap)

Lightweight Slider/Carousel based on CSS Scroll Snap.

基于CSS滚动捕捉的轻量级滑块/轮播。

Please note that this lib is on very early stage. The idea behind this plugin is that to create fully responsive and well optimised Carousel. I created this as PoC for one of my biggest client, who wants to speed up his website.

请注意，此库处于非常早期的阶段。 该插件背后的想法是创建完全响应并经过优化的Carousel。 我为最大的客户之一(希望加速其网站)创建了PoC。

View Demo 查看演示 View Docs 查看文档 View Github 查看Github

优点： (Benefits:)

• Lightweight (5-10x times lighter than other libs)

  轻巧(比其他库轻5到10倍)

• There is no calculation or heavy logic inside (Performence)

  内部没有计算或繁琐的逻辑(性能)

• Mostly all custamization via CSS!

  大多数情况下都是通过CSS定制的！

• You can set how many slides you want to display per current breakpoint (via css)

  您可以设置每个当前断点要显示多少张幻灯片(通过CSS)

• Fully responsive

  全面响应

用法 (Usage)

There are two ways to use it.

有两种使用方法。

全球范围 (Globally)

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

Vue.use(VueSnap)

在本地 (Locally)

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

export default {
  components: {
    Carousel,
    Slide
  }
}

发展历程 (Development)

Install necessary depandancies with yarn or npm

用纱线或npm安装必要的偏差

yarn

Run in Development mode

在开发模式下运行

yarn dev

Run in Production mode

在生产模式下运行

yarn build

Run Storybook for preview

运行Storybook进行预览

yarn storybook:dev

翻译自: https://vuejsexamples.com/lightweight-carousel-based-on-css-scroll-snapping/

css轮播图自动滚动