带有CSS滚动捕捉的微型水平旋转木马– vue-snap

带有CSS滚动捕捉的微型水平旋转木马– vue-snap

插件名称:vue-snap

发布时间:2020年7月14日

插件作者:bartdominiak

官网 演示 GitHub下载

vue-snap是一种轻巧的高性能Vue.js滑块/轮播组件,它使用CSS Scroll Snap自动将幻灯片项捕捉到边界。

变更日志:

v0.5.0(09/17/2020)

  • 添加了发射页面和绑定事件
  • 更新包

v0.4.0(09/15/2020)

  • 增加了禁用arrow和arrowOnBound的功能
  • 错误修复

v0.3.0(09/05/2020)

  • 添加了动态幻灯片支持

v0.2.0(08/29/2020)

  • 添加了VueLazy lib
  • 更新的依赖关系
  • 包装器中的静态高度已删除
  • 删除旧指令

v0.1.0beta 9(08/27/2020)

  • 为按钮箭头添加了缺少类型

使用:

1.导入必要的资源:

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

2.注册组件。

Vue.use(VueSnap);
// 或全局
import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'
export default {
  components: {
    Carousel,
    Slide
  }
}

3.将幻灯片添加到轮播中。

<carousel>
  <slide>
    Slide 1
  </slide>
  <slide>
    Slide 2
  </slide>
  <slide>
    Slide 3
  </slide>
  ...
</carousel>
相关插件