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

带有CSS滚动捕捉的微型水平旋转木马– vue-snap
插件名称 vue-snap
版本号 v0.7.0
发布时间 2020年7月14日
插件作者 bartdominiak

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

变更日志:

v0.7.0(02/09/2020)

  • 删除了maxPages及其计算
  • 用更简单的goToSlide替换changeSlide,以实现与公开的页面跳转API一致的行为+删除不再使用的依赖方法
  • 通过设置获取当前页面索引,支持从外部传递索引(例如goToSlide方法),因此在某些情况下,即使没有滚动事件,索引也会更改。
  • 修复了在无滚动内容时支持计算正确的当前幻灯片索引的问题

v0.6.6(12/06/2020)

  • 更新

v0.6.5(12/05/2020)

  • 更新

v0.6.4(11/29/2020)

  • 插槽范围内的changeSlide,BoundLeft,BoundRight

v0.6.3(11/23/2020)

  • 更新了elementScrollBy函数名称
  • 更新的依赖关系

v0.6.2(11/01/2020)

  • 固定幻灯片子项方法

v0.6.1(09/24/2020)

  • 删除了最大节点版本范围
  • 删除了节点版本的最大范围
  • 添加了动态标签支持
  • 添加了i18n支持并进行了正确的验证
  • 重置列表样式的CSS

v0.5.1(09/21/2020)

  • 更新

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>