Vue 翻转图像效果组件– VueRollr

Vue 翻转图像效果组件– VueRollr

插件名称:VueRollr

发布时间:2020年7月15日

插件作者:japick

官网 演示 GitHub下载

翻转图像效果,使访问者可以使用鼠标悬停在图像之间切换。还支持HTML5视频。

在移动设备上运行时,它会自动将图像转换为自动幻灯片显示。

安装和下载:

# NPM
$ npm i vuerollr --save

如何使用它:

1.导入VueRollr。

import VueRollr from 'vuerollr';

2.注册组件。

export default {
  components: {
    VueRollr
  }
}

3.将图像和视频添加到VueRollr组件。

<template>
  <div>
    <VueRollr>
      <img src="1.jpg">
      <img src="2.jpg">
      <video loop autoplay muted>
        <source src="3.mp4">
      </video>
    </VueRollr>
  </div>
</template>

4. Props 。

breakpoint: {
  type: Number,
  default: 768
},
speed: {
  type: Number,
  default: 1000
}
相关插件